关于移动端font-size思考前端设计稿与工作流

https://www.douban.com/note/520720658/

 

为了计算方便，

取一个100px的font-size为参照，那么body元素的宽度就可以设置为width:
6.4rem，于是html的font-size=deviceWidth /6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。根据这个计算规则，可得出本部分开始的四张截图中html

设计稿应该是基于iphone4或者iphone5来的，所以它的设计稿竖直放时的横向分辨率为640px＝6.4rem，

iphone6的，所以它的设计稿竖直放时的横向分辨率为750px＝7.5rem，

html:100px,font-size大小如下：
设备宽度= 320，font-size = 320 / (设计稿宽度/100)

适配iphone4 5(320px),设计稿大小按iphone6（750px）~~~

html {
  font-size: 100px;
}

@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
  html,body {
    font-size:42.66666666666667px;　　//320除以(750/100)
  }
}

html {
  font-size: 20px;
}

@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
  html,body {
    font-size:17.06666666666667px;　　//[320除以(750/100)]/5*2
  }
}

转载于:https://www.cnblogs.com/zz334396884/p/5568731.html