高度和宽度尽量使用百分百，像素px换成em、rem这种，网页会根据大小来自适应，要想使用效果好，就需要根据不同分辨率来设置层的高宽、字体大小，设置几套样式来应用
目前创新互联建站已为上千余家的企业提供了网站建设、域名、虚拟主机、网站托管维护、企业网站设计、观山湖网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
@media screen and (min-width:640px) {
/*屏幕大于640像素应用该样式*/
}
@media screen and (min-width:460px) and (max-width:640px) {
/*屏幕小于640大于460像素应用该样式*/
}
@media screen and (max-width:460px) {
/*屏幕小于460像素应用该样式*/
}
不是随便添加句话就可以自适应手机屏幕的，没这么简单。如果要自适应手机，是要用到rem单位的，然而rem又要搭配媒体查询来使用。
例如你的设计稿如果是宽720px的话，那你的文字就要以原始大小除以11.25，例如16px的话就要16/11.25这样来计算。我的意思是不用像素，用rem,因为px是写死的，rem是可以适应手机端的（包括盒子的宽高都是要以rem来计算）。另外，用之前要把下面这段代码放到你css文件里：
@media only screen and (max-width: 1080px) {
html, body {
font-size: 16.875px;
}
}
@media only screen and (max-width: 960px) {
html, body {
font-size: 15px;
}
}
@media only screen and (max-width: 800px) {
html, body {
font-size: 12.5px;
}
}
@media only screen and (max-width: 720px) {
html, body {
font-size: 11.25px;
}
}
@media only screen and (max-width: 640px) {
html, body {
font-size: 10px;
}
}
如果宽是720，就除以它相对应的那个值，如果是宽960，就除以960相对应的那个值，这么说应该可以明白吧。
纯手打，望采纳~
1. 用百分比实现 width:50%,这样会根据屏幕的大小来自适应宽度
（插一条calc的属性详解）
vw ：Viewport width，即容器（可以是div）的宽度，默认1vw=整个视窗宽度的1%，全屏为100vw。比如视窗宽度为1200px，1vw=120px=1200px*1%，如果是满屏就则为100vw=1200px。
vh ：Viewport height，即容器（如div）的高度，默认1vh=整个可视窗口高度的1%，全屏是100vh。
2. calc（100vmin）也可以达到自适应的效果，但还是用起来效果一般
3. calc(100vw - px) vw是根据屏幕的大小来计算的，屏幕缩小，100vw也会变大
按钮自适应原理是利用a标签和i标签各自一个背景组合成为按钮，达到自适应，具体实现css样式及html结构如下，感兴趣的朋友可以参考下
原理：利用a标签和i标签各自一个背景组合成为按钮，达到自适应。
复制代码
代码如下:
!DOCTYPE
html
html
head
meta
charset="UTF-8"
style
type="text/css"
.btn
a{text-decoration:none;}
.btn{display:
inline-block;
background:
url(s_btn.png)
no-repeat
0;
height:
22px;
line-height:
22px;
color:
#666;
vertical-align:top;}
.btn
i{display:block;font-style:
normal;
font-size:
12px;
padding:
10px;
background:url(s_btn.png)
no-repeat
right
-22px;
}
.btn:hover{text-decoration:
none;color:#4c8136;background-position:
-44px;}
.btn:hover
i{background-position:
right
-66px;}
.btn:active{background-position:
-88px;}
.btn:active
i{background-position:
right
-110px;}
.btn_disabled,
.btn_disabled:hover{background:
url(../img/s_btn.png)
no-repeat
-132px;cursor:
default;}
.btn_disabled
i,
.btn_disabled:hover
i,
.s_btn_disabled:active
i{background-position:
right
-154px;color:#999;}
/style
/head
body
a
href="#"
class="btn"
i这是按钮/i
/a
a
href="#"
class="btn"
i按钮/i
/a
/body
/html
效果：
背景图宽度自适应方法：
添加css样式background-size:
100%;
它的意思是规定背景图像的尺寸，但这个css样式使用时需要注意，有些浏览器是不支持，比如IE要求9+的版本才可以支持。
banner图自适应方法差不多，也是把图的宽度设置为百分比，容器的宽度依照窗口大小来设为百分比：
对图片添加宽度，因为不是背景图，所以对img添加css：
img
{
width:
100%;
}
以上，希望对你有帮助，如果我没有说明白，可以追问。
试用css3 语法@media screen and (判断属性){ CSS样式选择器 }
1、DIV+CSS小案例描述
根据整体来设置，设置他们的最大宽度(width)为640px，最小宽度为320px，此类设置适用于手机移动端；要实现屏幕自适应，那么就要用百分比来实现；所以设置width整体100%；img宽度100%；这样实现图片的自由缩放；
HTML代码如下：且仔细看清每一行的注释：
2、看下实现的效果如何：文字大小是如何变化的；
变化浏览器后效果：如图
自定义缩放其实主要就是判断浏览器的宽度，高度需要的话可以设置，还有设置内部区域块儿的宽度以及图片展示用百分比来控制；
