移动端适配方案vwflexible

43次阅读

共计 591 个字符，预计需要花费 2 分钟才能阅读完成。

何谓 移动端适配？首先我们要有期望

带着我们的期望，我们来看看移动端设备：
ios（375*667、414*736 等）安卓（320X480、480X800、540X960、1280*720、1920*1080 等）一般来说我们 只关心宽度，长页面的话就滑动。

基于 px 来写，肯定是不行的，这一会宽一会窄。那么 基于屏幕宽度我们等比缩放是不是就可以实现效果？

%，百分比适配方案是可以的，但是他 在不同的属性上基于的值是不同的 。这句话怎么理解呢，width: 100% 是 基于父级的宽度 ，height: 100% 是 基于父级的高度 。这样的话我们在 设置高度的时候就无法根据宽度来适配。
vm、vh，vw 这个完美的实现的我们的想法，我们在任何地方使用他都是基于屏幕宽度来计算。但是因为他的兼容问题，所有又出现了使用 rem 来适配的方案。
flexible，手淘的这套方案可以理解为是 vw 的方案的一个兼容实现。使用 rem 来实现基于屏幕宽度适配，rem 就是 相对于根元素 <html> 的 font-size 来做计算，那我们根据屏幕宽度动态计算 font-size 即可。