用vw适配手机端

作者 : 开心源码 本文共2130个字,预计阅读时间需要6分钟 发布时间: 2022-05-11 共58人阅读

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的内容,插件会自动帮你解决。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 用vw适配手机端

发表回复