一: 兼容的几个尺寸
分别为 320*480,360*640,480*854,540*960,768*1024,800*1280,980*1280,1280*600,1920*900 等几个尺寸.
二: 百分比布局的处理
1: 块元素的百分比
块元素的宽高尽量用百分比继承包含块 (不能简单地理解成是父元素. 如果这里的块元素是静态定位和相对定位, 包含块一般就是其父元素. 但是对于绝对定位的元素, 包含块应该是离它最近的 position 为 absolute,relative, 或者 fixed 的祖先元素. 对 固定定位的元素, 它的包含块是视口(viewport). 具体可以参考 W3Help) 的宽高;
2: 行高的百分比
当元素的行高为百分比时, 这里的百分比是相对于此元素的字体大小的百分比;
3:vertical-align 属性值的百分比
当 vertical-align 的属性值为百分比时, 这里的百分比是相对于此元素的行高;
4:background-position 属性值的百分比
如 50% 50% 会把图片的 (50%, 50%) 这一点与此元素的 (50%, 50%) 处对齐, 相当于设置了 center center. 同理 0% 0% 相当于 left top,100% 100% 相当于 right bottom;
5: 字体的百分比
字体的属性值为百分比时, 这里的百分比就相对于此元素父元素 (不是上面提到的包含块, 而是此元素的直接父元素) 的字体而言;
6: 图片的百分比
在图片变化不大的情况下可以用百分比; 但最好还是在不同大小的手机尺寸加载不同尺寸的图片(图片不会失真);
三: 字体单位的处理
: 如果选择 em, 这里就相对于此元素的父元素的字体大小而言(同上面字体的百分比);
: 如果选择 rem, 这里就相对于根元素 html 字体的大小而言;
: 字体类型最好用英文不要用汉子(后台程序员处理时可能会出现乱码), 如例如: font-family:"宋体";font-family:"微软雅黑"; 对应: font-family:"simsun";font-family:"Microsoft YaHei";
四: 兼容不同分辨率的处理
加上 < meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>在 head 标签里;
五: 注意
1: 元素块
在页面中非特殊情况下不要把一元素的宽高写死(写为 px), 最好用百分比;
2: 字体
非特殊情况下不要把字体单位设为 px, 而用 em 或者 rem, 鉴于 em 和 rem 的区别最好用 rem;
来源: http://www.qdfuns.com/article/15349/bdf35d3ee2e83bb607929bd97a50ec26.html