关于移动端适配

Posted 2020-09-29

通常移动端的布局方式

1、rem布局，通过动态设置根目录下的font-size达到元素大小“自适应”，通常和百分比布局一起使用

2、固定像素设固定视口宽度。

3、最费事的media query，根据设备视口宽度不同设置不同的样式，换句话说一个页面有多套样式。可以说是正宗的响应式布局。

常规的做法带来的苦恼

常规的这些做法总有一些缺陷是令人遗憾的：

1、rem和百分比布局，这种布局rem终归也是有极限的，当屏幕比较大时，页面元素就开始变得有那么一些不协调了。

2、设置固定的视口使用固定像素来做，那么问题又来了，假如你设置的是640px，那么就意味着最大在640的设备下能显示正常，一旦超出640的设备，就会出现一些地方布局出问题了，最关键还是存在一些兼容性的问题，安卓部分手机能够下滑，而实际下面根本没有任何东西，html的高度莫名其妙的多了很多。

3、media query，正常的来说这种做法是最好的，然而遗憾的是，它会大大增加UI的工作量，同时也大大增加你的工作量