UI给我的640宽度的设计稿,我在640的设计稿上切得素材备用,然后将设计稿的尺寸调至320,然后按照这个尺寸来布局,可是这样量的的尺寸在大屏幕上会显得很小,比如iphone6 plus上,通常大家是怎么解决的?
UI给我的640宽度的设计稿,我在640的设计稿上切得素材备用,然后将设计稿的尺寸调至320,然后按照这个尺寸来布局,可是这样量的的尺寸在大屏幕上会显得很小,比如iphone6 plus上,通常大家是怎么解决的?
可以用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;不然会影响布局。
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答2k 阅读
还有个兼容性差不多已经没有问题的单位vw
vw : 1/100th of the width of the viewport.
用法同rem,并且不用设定html的font-size