常见的移动端适配方案

常见的移动端适配方案

• media queries 媒体查询
• flex 布局
• rem 根字体大小(html标签的字体大小)
• vh vw
• 百分比

一、Media 媒体查询

不同的屏幕宽度加载不同的css代码
核心语法：

@media only screen and (max-width: 374px) {
  /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置样式*/
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
  /* iphone6/7/8 和 iphone x */
}
@media only screen and (min-width: 414px) {
  /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置样式 */
}

优点：

• 方法简单，目前像Bootstrap等框架使用这种方式布局
• 调整屏幕宽度的时候不用刷新页面即可响应式展示

缺点：

• 代码量比较大，维护不方便

二、Flex弹性布局

以天猫的实现方式进行说明：
它的viewport是固定的：

高度定死，宽度自适应，元素都采用px做单位

三、rem

rem相对根元素font-size计算值的倍数。根据屏幕的宽度设置html标签 的font-size，在布局时使用rem单位布局