遇到的问题
- 手机端屏幕大小和分辨率相差太大，如果使用px为单位，布局会有很大不同
- 在大屏手机上，不换行的一行字，在小屏手机上会换行，跟设计稿有很大出入
解决方案
- 使用flex布局，在垂直方向可以通过下滑的来弥补
- 使用rem动态单位，以html:{font-size:100px}为计算。网上有很多文章以10px为计算的，这有一个很大的bug，那就是谷歌浏览器字体小于12px会以12px显示，所以不能使用10px为基准
- 如果设计稿以750px为基准，根font-size的大小设置公式为
html{font-size: calc(100vw / 750 * 100)}这样设置，相当于根据屏幕宽度缩放，这是符合用户普遍认知的，大屏显示的比较大，小屏显示的比较小。