nolebase
Search K

Appearance

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 * 基准值

css
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 进行动态修改更加的便捷

js
// 获取页面的宽度
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 单位进行适配，推荐使用以下两个工具：

原理：

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

示例配置 1 ​

(设计稿为 375px)

js
// 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)，仍占屏幕的一半，与设计稿保持一致
js
module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue({file}) {
        return file.indexOf("vant") !== -1 ? 37.5 : 75;
      },
      propList: ["*"],
    },
  },
};

Viewport 布局适配 ​

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

示例配置 ​

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