[移动端适配]从一个祖传项目谈移动端vw适配一. 什么是vw适配 二. vw适配的兼容性 三. 如何在移动端H5项目w
通过阅读此篇文章, 你将有如下收获
什么是vw适配 vw适配的兼容性 如何在移动端H5项目webpack构建中引入vw适配 大漠老师vw适配方案中依赖安装的注(pa)意(keng)事(zi)项(shi) vw适配的坑以及爬坑姿势 实际开发中vw适配的应用背景故事
最近接手了一个祖传的H5项目, 用的rem适配方案, 但是当我看到css
img.user-avatar position: absolute left: 50% top: -5.4rem border: .125rem solid #FFAB74 width: 4.3125rem height: 4.3125rem transform: translateX(-50%) border-radius: 50% p.name margin-top: 0.1rem line-height: 0.4rem font-size: 0.28rem text-align: center color: #333333
我的感受是这样的
深呼吸一口气, 数了数桌上刚掉落的几根头发, 我想到何不用大漠老师的vw适配方案来带我出坑呢, 此篇文章即该方案的讲解
一. 什么是vw适配
1.1 vw 相对于视窗的宽度:视窗宽度是100vw, 即window.innerWidth大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小
1.2 <<CSS世界>>作者张鑫旭老师的视区相关单位vw, vh..简介以及可实际应用场景
二. vw适配的兼容性
2.1 可使用viewport的polyfill方案来完美解决:postcss-viewport-units与它的好基友viewport-units-buggyfill
2.1.1 原理 postcss-viewport-units自动添加content, viewport-units-buggyfill再把根据content里的数据把vw单位转为px单位, 如下图
2.1.2 如何使用
$ npm i -S viewport-units-buggyfill
const vub = require('viewport-units-buggyfill') window.addEventListener('load', () => { vub.init({ hacks: window.viewportUnitsBuggyfillHacks }) })
/* 对图片的特殊处理 */ img { content: normal !important; }
2.2 兼容的范围
2.3 测试用例
三. 如何在移动端H5项目webpack构建中引入vw适配
3.1 大漠老师的原文链接
如何在Vue项目中使用vw实现移动端适配(请戳)
3.2 大漠老师所用postcss plugins和配置的说明
3.2.1 插一嘴, 什么是postcss
postcss是一个平台，其本身不对 CSS进行处理，但是通过在该平台上集成插件，可以实现对CSS的操作。
3.2.2 核心postcss plugins: postcss-px-to-viewport
把px单位转换为vw、vh、vmin或者vmax这样的视窗单位
// your-project/.postcssrc.js module.exports = { "plugins": { // ... "postcss-px-to-viewport": { viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是375 viewportHeight: 667, // 视窗的高度，根据750设备的宽度来指定，一般指定667，也可以不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除) viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 mediaQuery: false // 允许在媒体查询中转换`px` } // ... } }
3.2.2 postcss-import
解决@import引入路径问题, 配合postcss-url让你引入文件变得更轻松
3.2.3 postcss-url
处理文件，比如图片文件、字体文件等引用路径
3.2.4 autoprefixer
让你在编码时不再需要考虑任何浏览器前缀的问题，可以专心撸码
3.2.5 postcss-cssnext
该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理
3.2.6 cssnano
压缩和清理CSS代码。在webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它. 记得将postcss-zindex设置为false, 否则z-index的值就会重置为1
3.2.7 postcss-aspect-ratio-mini
处理元素容器宽高比
3.2.8 postcss-write-svg
处理移动端1px的解决方案,该插件主要使用的是border-image和background来做1px的相关处理
3.2.9 postcss-viewport-units
给CSS的属性添加content的属性，配合viewport-units-buggyfill库给vw、vh、vmin和vmax做适配的操作, 这是一个前面提到的解决兼容性的核心插件
四. 大漠老师vw适配方案中依赖安装的注(pa)意(keng)事(zi)项(shi)
npm i -D postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
// your-project/.postcssrc.js module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { utf8: false }, "postcss-cssnext": {}, "postcss-px-to-viewport": { viewportWidth: 375, // (Number) The width of the viewport. viewportHeight: 667, // (Number) The height of the viewport. unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. viewportUnit: 'vw', // (String) Expected units. selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. minPixelValue: 1, // (Number) Set the minimum pixel value to replace. mediaQuery: false // (Boolean) Allow px to be converted in media queries. }, "postcss-viewport-units":{}, "cssnano": { preset: "advanced", autoprefixer: false, "postcss-zindex": false } } }
如果你跟着大漠老师一顿猛操作, 安装依赖时你会发现可能会出现以下问题:
4.1 postcss-cssnext插件被废弃, 推荐用postcss-preset-env
问题:
解决:
$ npm un -D postcss-cssnext $ npm i -D postcss-preset-env
// your-project/.postcssrc.js module.exports = { "plugins": { // ... - "postcss-cssnext": {}, + "postcss-preset-env": {}, // ... } }
4.2 如果你用vue cli3会缺少部分依赖
问题:
解决:
$ npm i -D postcss-import postcss-url
4.3 cssnano的preset使用了advanced, 需要安装对应依赖
问题:
解决:
$ npm i -D cssnano-preset-advanced
五. 实际开发中vw适配的应用
5.1 在css中写样式
在实际撸码过程，不需要进行任何的计算，直接在代码中根据UI稿写px, 如
.test { border: .5px solid black; border-bottom-width: 4px; font-size: 14px; line-height: 20px; position: relative; }
编译出来的CSS：
.test { border: .5px solid #000; border-bottom-width: 1.667vw; font-size: 3.733vw; line-height: 5.333vw; position: relative; }
5.2 在js和template中写样式, 我们定义一个转换数字为vw的工具类
// your project/src/shared/utils.js const toVw = (num) => { return ((window.Number(num).toFixed(5) / 375) * 100).toFixed(5) + 'vw' } const UTILS = { toVw } export default UTILS // your project/src/components/test.vue <template> <div :style="{ width: toVw(size), height: toVw(size) }" > </div> </template> <script type="text/ecmascript-6"> import UTILS from 'shared/utils' export default { props: { size: { default: 15 } }, methods: { toVw (num) { return UTILS.toVw(num) } } } </script>
六. vw适配的坑以及爬坑姿势
6.1 注意viewport的变化
如果你在样式中使用了vh单位, 请注意某些webView里键盘弹出时, 100vh对应的实际高度会变小
6.2 html2canvas
如果你有在前端截屏的需求, 刚好你用到了html2canvas插件, 而且刚好要适配ios低版本机型, 请使用0.5.0-beta4版本, 并且把加了css-content的标签的内容置空
.target-el { content: ""; }
6.3如果你项目里既有rem适配的组件, 又有vw的组件, 请根据需求配置webpack的loader的exclude和include
happy hacking~!
相关知识
移动端
手机移动端快速开发
如何从零高效的开发一款适配 Android 和 iOS 的移动端App
以生态适配性为基本原则的花境施工技术
【移动开发】详细介绍
移动应用设计与开发（项目式）（微课版）
软件工程移动应用开发是干什么的 – PingCode
移动Web实训DAY
「职位对比」花儿绽放 前端开发工程师怎么样
Html+Css+js实现春节倒计时效果（移动端和PC端）
网址: [移动端适配]从一个祖传项目谈移动端vw适配一. 什么是vw适配 二. vw适配的兼容性 三. 如何在移动端H5项目w https://m.huajiangbk.com/newsview948689.html
| 上一篇: 移动端的3种适配方法 |
下一篇: vue3 + ts + vite |
