移动端页面自适应布局(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);
    以上,不仅计算方便,而且解决适配各移动端设备,实现自适应布局。

上一篇:web应用系统开发,CSS内联样式的使用


下一篇:px 、 rem 、 vw学习