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