移动端640设计稿怎么切图的问题！

Question

UI给我的640宽度的设计稿，我在640的设计稿上切得素材备用，然后将设计稿的尺寸调至320，然后按照这个尺寸来布局，可是这样量的的尺寸在大屏幕上会显得很小，比如iphone6 plus上，通常大家是怎么解决的？

Answer 1

还有个兼容性差不多已经没有问题的单位vw
vw : 1/100th of the width of the viewport.
用法同rem，并且不用设定html的font-size

https://developer.mozilla.org...

Answer 2

手淘的适配方案：https://github.com/amfe/artic...

Answer 3

谢邀，就布局而言，一般是rem，考虑到移动端的兼容性而言，就这最佳实践。
不兼容，当然上flex啊，当然也还是要算一算比例的。

Answer 4

请参考lib-flexible

Answer 5

可以用rem。

具体是这样

1.<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no" />

声明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;不然会影响布局。

Answer 6

推荐vw vh vmin vmax
图片还是使用640的，这样在dpi为2的机器上不会发虚