移动web适配方案

最新推荐文章于 2024-09-13 23:32:49 发布

weixin_34362875

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量73

点赞数

文章标签：前端 webpack javascript ViewUI

原文链接：https://juejin.im/post/5b0d0c64f265da09307d978c

版权

一、rem + simple-flexible 适配方案

简单解析

simple-flexible 是在手淘团队 lib-flexible.js的基础上改写的一个插件，兼容 UC 竖屏转横屏出现的BUG。自定义视觉设计稿的宽度：designWidth，设定最大宽度：maxWidth。
这里有 simple-flexible 的 Github 地址，下载下来用即可。
第一个参数是视觉设计稿的宽度，一般视觉设计稿有 750px，可以根据实际调整；
第二个参数则是设置制作稿的最大宽度，超过 750px，则以 750px 为最大限制；使用时候的换算比例，是 1：100，即 1rem = 100px；

使用步骤

复制 simple-flexible 的 flexible.min.js 或 flexible.js 代码到页面的 <head> 的 <script> 标签里面；然后根据视觉设计稿大小，调整里面的最后两个参数值；根据设计像素，使用 rem 单位转换的视觉设计稿里面的 px 单位，例： 750px = 7.5rem；

二、PostCSS + VW 适配方案

简单解析

PostCSS 将 CSS 变成 JavaScript 的数据，使它变成可操作; VW 是基于 Viewport 视窗的长度单位; Viewport 是指浏览器可视化的区域，而可视化区域即是 window.innerWidth/window.innerHeight 的大小; 与 Viewport 相关的单位有以下四个:

vw : 是 Viewport width 的简写 1vw = window.innerWidth的 1%；
vh : 是 Viewport height 的简写 1vw = window.innerHeight 1%；
vmin : vw 和 vh 之间的较小值
vmax : vw 和 vh 之间的较大值

使用步骤

假设视觉设计稿的宽度是 750px 即 1vw = 7.5px，那么就得根据设计图的 px 值来转换 vw单位，为了避免这样的计算，当然就需要使用到 PostCSS ，以及 postcss-px-to-viewport 一个 PostCSS 的插件本方案使用打包工具构建项目的时候使用是最爽的，建议在以下环境下尝试:
webpack

有过使用前端脚手架的童鞋，应该都有看到过项目根目录下面都会有一个 .postcssrc 文件，它里面都是一些配置选项，比较著名的 autoprefixer，cssnano，px2rem，cssnext...等等好玩的配置插件，但是这里不作这些说明，只介绍 postcss-px-to-viewport 配合 vw 使用。
Npm：
npm i -S postcss-px-to-viewport
打开 .postcssrc，假定视觉设计稿的宽度为 750px 改写配置如下：

"plugins": {
  "postcss-px-to-viewport": true
},
"rule": {
  "postcss-px-to-viewport": {
    "viewportWidth": 750,
    "viewportHeight": 1334,
    "unitPrecision": 5,
    "viewportUnit": "vw",
    "selectorBlackList": [],
    "minPixelValue": 1,
    "mediaQuery": false
  }
}
复制代码

配置完成之后，在项目中直接使用 px ，构建的时候就会自动转换为 vw 单位了，简直太爽了；
postcss-px-to-viewport 配置项说明
"viewportWidth" //设置视觉设计稿的宽度
"viewportHeight" //设置视觉设计稿的高度
"unitPrecision": //单位的精度，即保留多少位小数
"viewportUnit": //转换的单位
"selectorBlackList": //需要忽略的选择器
"minPixelValue": //最小像素值
"mediaQuery": //是否允许媒体查询转换为 px

转载于:https://juejin.im/post/5b0d0c64f265da09307d978c