尺寸:
超小屏:768以下;
小屏:768-992
中屏:992-1200
宽屏:1200以上;
适配方案
-
方案一:百分比布局
-
方案二:bootstrap
-
方案三:媒体查询
-
方案四:flex布局
-
方案五:rem适配
动态计算html的字体大小的公式如下:
rem = document.documentElement.clientWidth * dpr / 10
说明:
1.乘以dpr,是因为页面有可能为了实现1px border页面会缩放(scale) 1/dpr 倍(如果没有,dpr=1)。
2.除以10,是为了取整,方便计算(理论上可以是任何值)。
3.根据这个公式可以知道,手机的clientWidth(屏幕宽度)和dpr(物理像素 / 设备独立像素)决定了html的字体大小(基准值)。比如:
iphone3gs: 320px / 10 = 32px
iphone4/5: 320px * 2 / 10 = 64px
iphone6: 375px * 2 / 10 = 75px不同屏幕尺寸
在CSS中单位使用rem,那么只要修改html的font-size那么这个页面的尺寸都会随之等比例改变。例如:// 750尺寸页面 html{ font-size: 75px; // 通过js获取宽度750/10得到 } div{ width: 1rem; // 相当于75px height: 1rem; }
// 网页放到了375屏幕下面
html{ font-size: 37.5px; // 修改html的字号为37.5px,那么div的width和height自动会缩小一半 }
上面完成了不同屏幕尺寸的适配问题,不会让元素在不同尺寸屏幕下总是显示同样的像素。
根据html基准值16px 求 12px字体大小对应的rem值z
16px/1rem = 12px/z rem
z=12/16=0.75rem;
适配细节:
-
在网页代码的头部,加入一行viewport元标签。
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
-
不使用绝对宽度px;
具体说,CSS代码不能指定像素宽度:
width:xxx px;
只能指定百分比宽度:
width: xx%;
或者
width:auto; -
相对大小的字体 (不能用px,只能用相对大小em)
body { font: normal 100% Helvetica, Arial, sans-serif; }
上面的代码指定,字体大小是页面默认大小的100%,即16像素。
h1 { font-size: 1.5em; }
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
small { font-size: 0.875em; }
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
-
图片的自适应(fluid image)
除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。
这只要一行CSS代码:img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好写成:
img { width: 100%; }
此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的imgSizer.js。
addLoadEvent(function() { var imgs = document.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); });
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片