移动端页面自适应布局（rem布局）

根据设计稿宽度750px，如何布局自适应各移动端设备？

• 首先自定义一个font-size：16px；此时有 1rem = 16px；可以用font-size去定义最小单位，使用rem单位计算宽度/高度。
  根据设计稿去计算布局，此时的rem单位只能适配宽度像素为750px的设备，不具备适应各种移动端设备。

• 根据css3自适应布局单位vw
  已知：100vw = 100% （视口宽度）； 100vh = 100% (视口高度)
  对于不同设备可视视口比例大小不同，但是vw总能代表该视口宽度比例
  以设计稿750px宽度为例，得出：100vw = 750px；

• 计算自适应font-size(以750px设备宽度，font-size：50px作为参考)：
  50px/750px = X vw/100vw
  X = 6.66667vw
  可以根据设计稿，去改变参考值的代入，得出的font-size单位是vw，根据rem单位自适应各移动端设备，如下使用介绍。

• 使用
  将< html>根标签font-size：6.66667vw
  这样子，
  对于750px宽度设备来说 1rem代表50px（根据3公式计算结论可直接得出）；
  对于375px宽度设备来说 1rem代表25px（X px/375px = 6.66667vw/100vw；得出 X= 25px）；
  以上，不仅计算方便，而且解决适配各移动端设备，实现自适应布局。

标签：size,布局,750px,宽度,vw,rem,font,设备,页面
来源： https://blog.csdn.net/le__seul/article/details/118552076