rem移动端
viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
初始字号
css中设定html根元素的初始字体大小为100px
html{font-size:100px;}
单位转换
不管你拿到的设计稿宽度是640px还是750px,多大都一样。和我们平时做PC页面的做法基本一样,只需要把单位px换算成rem,所有设计稿的的元素大小全除以100单位换成rem,例如设计稿上个某个文字的大小为30px,直接写font-size:0.3rem。
示例代码
用 onorientationchange
函数来检测屏幕旋转,在一些APP或游戏内嵌页面会有该函数不会执行、orientation获取不到的情况。所以如果是游戏app内嵌页建议使用 resize
事件,检查宽高变化来检测屏幕是否旋转。
<script>
//屏幕适应
(function (win, doc) {
if (!win.addEventListener) return;
var html = document.documentElement;
function setFont() {
var html = document.documentElement;
var k = 640;
html.style.fontSize = html.clientWidth / k * 100 + "px";
}
setFont();
setTimeout(function () {
setFont();
}, 300);
doc.addEventListener('DOMContentLoaded', setFont, false);
win.addEventListener('resize', setFont, false);
win.addEventListener('load', setFont, false);
})(window, document);
</script>
注意事项
使用rem方式布局有以下几点需要注意:
- 页面用不同尺寸的手机进行测试
- 因为小于1px浏览器支持不够好为会导致计算会有误差,背景图使用雪碧图时,图标之间多留5px的空隙,同时图片的backgrornd-size属性最好写上图片的宽高,不写误差更大。
- 雪碧图,如图片宽高为346px*160px需要设置background-size属性设置为background-size: 3.46rem 1.6rem;
- 大小为1px的元素不要使用rem,直接用px
- 多栏多列布局优先使用百分比
%
或是display:flex