移动端布局方案——rem布局(逆战班)
- rem布局
- 好处: 不同设备下看起来比较协调。
- 坏处: 显示的内容并不会在大屏幕展示的内容多。
- em : 是一个相对单位,1em等于当前元素或父元素的font- size值。
- 1em == 1个font-size的大小
- rem : 是一个相对单位,
- 1rem等于根元素的font-size值。
- 1rem == 1个根元素的font-size大小 就是 1个html标签的font-size大小 rem -> root + em
- rem布局的原理:
页面中的元素采用rem作为尺寸或者间距的单位。 想办法去动态改变html标签的font-size大小,这样就可以适配不同的设备进行等比缩放。 如何做到font-size动态化?
- 通过JS (JavaScript) document.documentElement.clientWidth -> 获取布局视口的宽度。 在iphone 6 -> document.documentElement.clientWidth -> 375 在iphone 6 plus -> document.documentElement.clientWidth -> 414 在iphone 6 -> font-size 100px ? document.documentElement.clientWidth(375) / 3.75 -> 100 在iphone 6 plus -> font-size 大于 100px ? document.documentElement.clientWidth(414) / 3.75 -> 110.4
2.通过vw (vw是尺寸单位)
vw -> view width vh -> view height
相对单位:表示把屏幕自动分成了100vw宽和100vh高。 vw / vh : 把屏幕分为100份,1vw等于屏幕宽的1%。
假设屏幕是375px -> 100vw -> 1vw == 3.75px 假设屏幕是414px -> 100vw -> 1vw == 4.14px
iphone6 -> html的font-size ? -> 100px 1vw == 3.75px ? -> 多少个vw == 100px -> 26.66667vw -> 100px
iphone6 plus -> html的font-size ? -> 1vw == 4.14px ? -> 26.66667 * 4.14px ? -> 110.4px
注:选择iphone6 html的font-size为100是为了好算。也可以用辅助开发。 在 vsCode中去下载一个插件 -> px to rem -> 在设置把对应的font-size设置下。 ——> 选中代码按 alt + z进行px转rem的操作。
注:使用rem进行布局的时候,一定要在body中重置默认的font-size大小。
实战rem布局:
直接按一种设备去做。->列如 iphone 6 -> 版心375px。在一种设备做完,再去适配不同的设备。
注:做rem布局,心里只想着iphone 6一款设备,然后测量尺寸,换算rem。
在线px转rem工具:http://www.ofmonkey.com/front/rem