最近在知乎上看了这个问题 为什么很多web项目还是使用 px,而不是 rem?,看得大神们讨论,看得也是晕晕的,我也不知道自己看懂没有,整体看下来,比较赞成这个观点:
大屏手机让用户看到的更多,而不是看到的更大
目前移动端兼容不同屏幕尺寸基本上都是rem布局,rem布局的本质是 对页面的等比缩放,就像是一张图片的放大缩小,这个方案在手机上还可以,但是把给iphone7设计的页面用rem原封不动扩展到ipad上,就会发现很灾难(好歹限制一下根元素字体的值)字体和图片都巨大。最理想的状态还是要对平板等大屏设备再加一个设计稿,响应式开发。除去平板设备的话,我觉得用rem适配是没啥问题的。
然后,我把项目中的rem尝试用vw稍微改了一下,为什么要用vw,vw是viewport的百分比单位,1vw等于百分之一的viewport宽度(layout viewport,也可以跳过这个概念),要做到对设计稿对等比缩放,直接用这个单位是最简单的,而且现在兼容性好像没什么问题,传统的rem还要写一个脚本,所以尝试一下vw
我的工作流程是这样的:
- 拿到设计稿,一般是以iphone678为基准的(750px宽),然后用蓝湖转化成1倍的代码,开发时直接拷贝蓝湖生成的样式。
- 在工程中使用pxtorem转换(pxtorem可以将代码里的px根据自己定义的rootValue值换算成rem),rootValue设置为16,为什么是16,因为我们在第一步的时候是按一倍图来写的,如果哪天不想用rem了,可以直接,把pxtorem去掉,代码还直接还原成px
- 在css最前面加入关于html的字体设置,我用的less
.font-size(@sizeValue:16) {
@vw: 16 / 375 * 100;
@result: @sizeValue / 16 * @vw;
font-size: ~"@{result}vw";
}
html {
.font-size(16);
}
html {
//限制根元素最大最小字体值,只在320-480之间使用vw
@media screen and (max-width: 320px) {
font-size: 16px;
}
@media screen and (min-width: 480px) {
font-size: 18px;
}
}
body {
max-width: 1000px;
min-width: 320px;
margin: auto;
}
复制代码
完毕,可能有很多错误,欢迎评论指出~