CSS 移动端适配

流式布局（百分比布局）

• 父盒子
  • 设置宽度 100%
  • 设置 max-width 与 min-width
  • 使用 margin: 0 auto 将其居中
• 子盒子
  • 使用浮动使其在同一行显示
  • 将宽度设置为百分比，根据屏幕的宽度来进行伸缩
  • 高度固定

Flex 弹性布局

• 父盒子
  • 使用 display: flex
  • 通过 justify-content 与 align-items 来指定子盒子位置
• 子盒子
  • 使用 flex-grow flex-shrink flex-basis 来控制子盒子宽度的占比及缩放
  • 高度固定

Rem 布局

Rem 布局思路

• Rem 单位相对于根标签的字体大小，默认情况下 1rem = 16px
• 页面布局时，使用 rem 作为单位
• 通过设置与动态修改根标签的 font-size 来实现页面在不同宽度下的适配
  • 以下基准值的设置便于口算 rem 值
  • font-size = 375 / 设计稿宽度 * 100px
  • 当设计稿为 375px 时，可将 font-size 设置为 100px
  • 当设计稿为 750px 时，可将 font-size 设置为 50px
  • 使用时，将设计稿的 px 除以 100 后，直接转换为 rem 即可
  • 例如，设计稿上盒子的宽度为 50px，转换后为 0.5rem

媒体查询

需要为每一个机型的宽度指定属于自己的 font-size ，其值为 设备宽度 / 375 * 基准值

html {
  font-size: 100px;
}
/* iPhone 5 */
@media screen and (min-width: 320px) {
  html {
    font-size: 85.33px;
  }
}
/* iPhone 6 */
@media screen and (min-width: 375px) {
  html {
    font-size: 100px;
  }
}
/* iPhone 6 Plus */
@media screen and (min-width: 414px) {
  html {
    font-size: 110.4px;
  }
}

JavaScript

使用媒体查询修改根元素 font-size 的大小较为复杂，使用 JavaScript 进行动态修改更加的便捷

// 获取页面的宽度
var width = document.documentElement.clientWidth || document.body.clientWidth;
// 计算页面实际宽度与 375px 的比例
var ratio = width / 375;
// 将根元素的 font-size 按比例进行缩放
document.getElementsByTagName('html')[0].style.fontSize = ratio * 100 + 'px';

flexible.js

• 以上方法均为口算 + 手动适配，使用 flexible.js 可以自动根据页面宽度改变基准值

• 基准值为设计稿的1/10

• 直接将设计稿中的px 数值除以基准值即可得到 rem 值

• 10rem 为占满屏幕，类似下面的 vw 布局中的 100vw

Viewport 布局

• 以设计稿 375px 为例
• 其中 1vw = 3.75px ，例如，设计稿上盒子的宽度为 50px，需将宽度设置为 (50 / 3.75) vw 即 13.33vw
• 在不同页面宽度下，其宽度会自适应屏幕的宽度
• 需要使用大量的除法运算，一般配合 LESS SCSS 等预处理器使用

PostCSS

使用 Rem 与 Viewport 布局时，需要大量的单位换算，十分不便。通过 PostCSS 插件，可以实现在开发过程中，全部使用 px 单位，插件会自动将 px 单位转化为 rem 或 vw/vh 单位

Rem 布局适配

如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

• postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
• lib-flexible 用于设置 rem 基准值

原理：

• lib-flexible 会自动将 rem 基准值设置为屏幕的1/10
• postcss-pxtorem 会自动将 px / rootValue 得到转换后的 rem 值

示例配置1 (设计稿为 375px)

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // rootValue 设置为 设计稿宽度/10
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

示例配置2 (使用 vant 组件库，设计稿为 750px)

原理：

• 根元素的 font-size 为 37.5px
• 若一个盒子的宽度在设计稿里为 375px 本来占屏幕的一半，除以 37.5 转换后为 10rem (即375px)，会占满屏幕
• 通过以下设置后，375px 除以 75 转换后为 5rem (即187.5px)，仍占屏幕的一半，与设计稿保持一致

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

Viewport 布局适配

推荐使用 postcss-px-to-viewport 进行转换

示例配置

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};