使用vw适配移动端

0.082字数 435阅读 699

1.vw原理解析

  • vw是基于Viewport视窗的长度单位,这里的视窗(Viewport)指的就是浏览器可视化的区域,而这个可视区域是window.innerWidth/window.innerHeight的大小。
  • Viewport相关的单位有四个,分别为vw、vh、vmin和vmax:
    • vw:是Viewport's width的简写,1vw等于window.innerWidth的1%
    • vh:和vw类似,是Viewport's height的简写,1vh等于window.innerHeihgt的1%
    • vmin:vmin的值是当前vw和vh中较小的值
    • vmax:vmax的值是当前vw和vh中较大的值
    • vmin和vmax是根据Viewport中长度偏大的那个维度值计算出来的,如果window.innerHeight > window.innerWidth则vmin取百分之一的window.innerWidth,vmax取百分之一的window.innerHeight计算。
  • 如果设计稿的宽度是750px,那么100vw=750px,1vw=7.5px

2.Vue项目中使用vw实现移动端适配

  • 安装PostCSS插件
    • 在.postcssrc.js使用postcss
    • 已经装好有postcss-import、postcss-url、autoprefixer
    • 新增插件:npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S
  • 在.postcssrc.js文件对新安装的PostCSS插件进行配置:
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // 使用postcss的插件实现vw适配移动端
    // 由于cssnext和cssnano都具有autoprefixer,事实上只需要一个,所以把默认的autoprefixer删除掉,然后把cssnano中的autoprefixer设置为false
    'postcss-aspect-ratio-mini': {}, // 用来处理元素容器宽高比
    'postcss-write-svg': { // 用来处理移动端1px的解决方案
      uft8:false
    },
    'postcss-cssnext': {}, // 让项目使用CSS未来特性 并对其做兼容性处理
    'postcss-px-to-viewport': {
      viewportWidth: 750, // 视窗的宽度,对应我们设计稿的宽度,一般是750
      viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
      unitPrecision: 3, // 指定'px'转换为视窗单位值得小数位数(很多时候无法整除)
      viewportUnit:'vw', // 指定需要转换成的视窗单位,建议使用vw
      selectorBlackList: ['.ignore','.hairliness'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值。
      mediaQuery: false // 允许在媒体查询中转换`px`
    },
    'postcss-viewport-units': {}, // 给CSS的属性添加content的属性 配合viewport-units-buggyfill解决个别手机不支持vw
    'cssnano': { // 压缩和清理CSS代码
      preset: 'advanced',
      autoprefixer: false,
      'postcss-zindex': false
    }
  }
}
  • vw兼容方案: 兼容个别手机
    • 主要使用viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js,只需要在你的HTML文件中引入这两个文件。比如在Vue项目中的index.html引入它们
    • <script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
    • 在HTML文件中调用viewport-units-buggyfill
    <!--使用viewport-units-buggyfill解决个别手机不支持vw-->
    <script>
      window.onload = function () {
        window.viewportUnitsBuggyfill.init({
          hacks: window.viewportUnitsBuggyfillHacks
        });
      }
    </script>
    
    • 前面配置的postcss-viewport-units插件。这个插件将让你无需关注content的内容,插件会自动帮你处理。

推荐阅读更多精彩内容