响应式布局rem布局
我们做的h5页面只能在移动端访问（rem不兼容低级版本浏览器）
第一步：从UI设计师拿到设计稿（psd） 640*1136 第二部：在样式中给HTML一个fontSize值，我们一般都给一个比较好算的值，比如：10px 100px... 在这里我们之所有用100px,主要是浏览器最小的字体大小都是12px,用10px比例会存在偏差
html{
font-size: 100px;/*1rem=100px*/
}第三步：写页面，写样式 完全按照设计尺寸来写样式，不管任何事情，设计稿给你的宽度，高度字体大小、margin、padding的值是多少，我们就写多少 但是我们在写样式的时候，需要把得到的像素值除以100，计算出对应的rem值，我们设定的也都是rem的值 （值得注意点的是外层盒子的宽度我们一般还是不写固定值，沿用流式布局的思想）
第四步：根据当前屏幕的宽度和设计稿的宽度来计算我们的HTML的fontSize的值 设计稿：640 fontSize=100 手机：320 fontSize=50 手机：375 fontSize=58.59375
// 根据当前屏幕的宽度和设计稿宽度的比例，动态计算一下宽度下fontSize值应该是多少，如果fontSize值改变了，之前的rem会自动跟着放大或缩小
~function () {
var desW=640,
winW=document.documentElement.clientWidth,
n=winW/desW;
document.documentElement.style.fontSize=n*100+'px';
}();jd移动布局
~function () {
var desW=640,
winW=document.documentElement.clientWidth,
n=winW/desW;
var con=document.getElementById('con');
if(winW>desW){
con.style.width=desW+'px';
con.style.margin='0 auto';
return;
}
document.documentElement.style.fontSize=n*100+'px';
}();本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.04.08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读