84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
ringa_lee
还有个兼容性差不多已经没有问题的单位vwvw : 1/100th of the width of the viewport. 用法同rem,并且不用设定html的font-size
https://developer.mozilla.org...
手淘的适配方案:https://github.com/amfe/artic...
谢邀,就布局而言,一般是rem,考虑到移动端的兼容性而言,就这最佳实践。不兼容,当然上flex啊,当然也还是要算一算比例的。
请参考lib-flexible
可以用rem。
具体是这样
1.
声明meta信息禁止浏览器默认缩放。
2.html{font-size:100px}
rem将根据100px为基准换算 此时1rem=100px; 将你css布局中用到的px全部换算成rem。
3.页面onload之后,执行下列函数。
这段函数通过更改html的font-size来达到确定实际rem应为多少px
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if(!clientWidth) { return } docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; }; if(!doc.addEventListener) { return } win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); }(document, window))
这是我的大概思路,要注意的一个坑就是布局的时候有时需要手动去设置某个区域font-size:0;不然会影响布局。
推荐vw vh vmin vmax图片还是使用640的,这样在dpi为2的机器上不会发虚
还有个兼容性差不多已经没有问题的单位vw
vw : 1/100th of the width of the viewport.
用法同rem,并且不用设定html的font-size
手淘的适配方案:https://github.com/amfe/artic...
谢邀,就布局而言,一般是rem,考虑到移动端的兼容性而言,就这最佳实践。
不兼容,当然上flex啊,当然也还是要算一算比例的。
请参考lib-flexible
可以用rem。
具体是这样
1.
2.html{font-size:100px}
3.页面onload之后,执行下列函数。
这是我的大概思路,要注意的一个坑就是布局的时候有时需要手动去设置某个区域font-size:0;不然会影响布局。
推荐vw vh vmin vmax
图片还是使用640的,这样在dpi为2的机器上不会发虚