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

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

阅读 5.4k
6 个回答

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

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

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

可以用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;不然会影响布局。

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题