关于按照设计稿适配移动端开发的一点思考

遇到的问题

  • 手机端屏幕大小和分辨率相差太大,如果使用px为单位,布局会有很大不同
  • 在大屏手机上,不换行的一行字,在小屏手机上会换行,跟设计稿有很大出入

解决方案

  • 使用flex布局,在垂直方向可以通过下滑的来弥补
  • 使用rem动态单位,以html:{font-size:100px}为计算。网上有很多文章以10px为计算的,这有一个很大的bug,那就是谷歌浏览器字体小于12px会以12px显示,所以不能使用10px为基准
  • 如果设计稿以750px为基准,根font-size的大小设置公式为
html{font-size: calc(100vw / 750 * 100)}

这样设置,相当于根据屏幕宽度缩放,这是符合用户普遍认知的,大屏显示的比较大,小屏显示的比较小。

Leave a Reply