viewport的单位vw、vh

vw、vhviewport分成了一百份。vw即 viewport width vh即viewport height

  • 1vw等于视图单位的1%的宽度
  • 1vh等于视图单位的1%的高度

如果设计稿的视图为375px 那么1vw 等于 3.75px

在配置开始之前 我们依然需要一个vue-cli项目 在项目的index.html 我们需要在head标签中添加如下代码

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

viewport适配解决方案

要使用viewport适配 我们必须安装postcss-px-to-viewport这个包。这包名是不是有一种似曾相识的感觉。

没错,上篇文章中我们使用过postcss-pxtorem。这两个包不仅名字相似,功能也有相似的地方。postcss-pxtorem是将 px单位转换为rem单位。postcss-px-to-viewport则是将px单位转换为vw、vh

//引入 postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
 

安装完成后 我们需要进行postcss插件相关的配置 在根目录新建一个名为postcss.config.js的文件,如果项目中已包含该文件则无需新建。在文件中写入如下代码:

//postcss.config.js

module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: "px", // 要转化的单位
viewportWidth: 375, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度,即小数点位数
propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw
fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vw selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名,
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
}
}
}
 

在配置上这两个包也有相似的功能。大家可以去参考一下postcss-px-to-viewport作者的github[4]

值得注意的是:postcss-px-to-viewport 同样存在第三方组件库兼容性的问题。比如在设计稿为750px时使用vant组件库会将vant组件的样式缩小。

解决第三方组件库兼容问题

vant组件库的设计稿是按照375px来开发的。因此在viewportWidth750px时会出现转换问题。

// postcss.config.js
const path = require('path'); module.exports = ({ webpack }) => {
const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;
return {
plugins: {
autoprefixer: {},
"postcss-px-to-viewport": {
unitToConvert: "px",
viewportWidth: viewWidth,
unitPrecision: 6,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: true,
exclude: [],
landscape: false
}
}
}
}
 

如果读取的node_modules中的文件是vant,那么就将设计稿变为375px。如果读取的文件不是vant的文件,那么就将设计稿变为750px。这样就可以避免vant组件在750px下出现样式缩小的问题了。

同理 这对于其他的移动端UI组件库同样有效果。我们只需要改动这行代码即可

const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750; 
 

至此,我们的viewport的适配就做好了,只需要按照设计稿的比例进行开发就可以了。

作者:李知恩

https://juejin.cn/post/7061866685166256142

viewport适配解决方案的更多相关文章

  1. Qt之高DPI显示器(二) - 自适配解决方案分析

    目录 一.回顾 二.框架说明 1.ICallDPIChanged 2.IDPIHelper 3.悬浮窗体管理器 三.方案分析 1.窗口大小 2.字体大小 3.间距 4.图标 四.相关文章 原文链接:Q ...

  2. emoji表情多终端适配解决方案

    emoji表情多终端适配解决方案 emoji,也叫 颜表情 是日本在无线通信中所使用的视觉情感符号,由栗田穰崇(Shigetaka Kurita)创作,并在日本网络及手机用户中流行.自苹果公司发布的i ...

  3. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  4. 移动端适配(2)——viewport适配

    通过viewport来适配 <script> (function(){ var w=window.screen.width; console.log(w);//获取屏幕尺寸 var tar ...

  5. 【原】android【手机】屏幕适配解决方案,完美适配适配hdpi,xhdpi,xxhdpi的做法。

    1.先说要怎么做,后面在慢慢讲解: 2.现在来讲解为什么要放这三套: 这三套其实按内容来说就两种,为什么这两种可以适配hdpi,xhdpi,xxhdpi呢? 那么两种类型的dimens就可以了,为什么 ...

  6. 低价替代Vector CANoe CAN总线适配解决方案支持所有USBCAN(周立功CAN、PCAN、Kvaser、ValueCAN、NI CAN)

    在汽车通信领域CAN总线使用非常广泛,最强大的工具有Vector Case(10WRMB).Pcan(2KRMB),ZLGCAN(1.5KRMB),KVASER(2KRMB).ValueCAN(4KR ...

  7. iPhone X 适配解决方案

    在head里添加<meta name='viewport' content='initial-scale=1, viewport-fit=cover'> 这将导致一个页面允分利用iPhon ...

  8. 指令汇B新闻客户端开发(六) 浅谈屏幕适配解决方案

    屏幕适配的问题,我相信很多大牛的经验远比我丰富,在此就简单的分享一下我所做的的屏幕适配方案,当然我说的是安卓方面的啦,嘿嘿,屏幕适配我们一般用1280*720的屏幕作为我们的主流开发屏,当然现在And ...

  9. 移动端H5多终端适配解决方案

    推荐三篇文章: 1.来自手淘团队的开源技术flexibal.js github地址:https://github.com/isHelenaChan/flexible 2.来自“大漠”(就职于淘宝,也是 ...

  10. RecyclerView使用技巧(item动画及嵌套高度适配解决方案)

    原文地址 · Frank-Zhu  http://frank-zhu.github.io/android/2015/02/26/android-recyclerview-part-3/?utm_sou ...

随机推荐

  1. Day 23 23.1:js加密算法

    js加密算法 逆向重点掌握的内容: 1.逆向的思维 2.网站逆向的分析思路和步骤 注意:重点不是放在代码中,而是分析的思路和套路(技巧) 逆向到底是什么? 通俗来讲,逆向就是处理爬虫过程中对于加密数据 ...

  2. JDK8在xp安装办法

    jdk默认不支持xp,用到了后来的api,直接没法安装. 具体安装步骤: 1.用7-zip打开jdk8的版本8u231之前的版本. 2.导航到 .rsrc\1033\JAVA_CAB10\111把里面 ...

  3. 使用Java API操作Neo4j

    使用IntelliJ IDEA (Jet Brains) 创建java工程 把下载好的neo4j包中的lib文件下的所有jar文件复制到工程Neo4j_Project的lib文件夹下(若无lib文件夹 ...

  4. unzip--离线安装

    centos 7 查看系统版本 [root@localhost work]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) ...

  5. 2022-04-27内部群每日三题-清辉PMP

    1.对一个关键项目的要求是产品的持续可追溯性,质量团队建议在制造过程的每个步骤创建检查点.然而,这些检查点耗费了宝贵的时间和资源.项目经理应执行什么类型的分析来确定适当的检查点数量? A.备选方案分析 ...

  6. xxl-job调度任务简单使用

    简介 XXL-JOB是一个分布式任务调度平台,其核心设计目标是开发迅速.学习简单.轻量级.易扩展.现已开放源代码并接入多家公司线上产品线,开箱即用. https://www.cnblogs.com/x ...

  7. docker搭建图片压测QPS3000+服务器(ftp+nginx)

    docker搭建图片压测QPS3000+服务器(ftp+nginx) 在针对图片算法服务进行压力测试时,需要高性能的图片服务器 自己编写的图片应用性能不一定能达到要求 可能因为图片应用自身达不到压测要 ...

  8. vue组件自调用

    组件自调用 在vue中有些情况下我们会用到组件本身来遍历出自己想要的效果. 其实非常简单,可以在模板中使用name属性值,来调用自己 <template> <el-submenu v ...

  9. python 对接各大数据库,快速上手!

      1.mysql 安装pymysql pip intsall pymysql 快速上手 import pymysql # 第一步:连接到数据库 con = pymysql.connect(host= ...

  10. HIVE- 各年逐月累加函数

    select year_flag,month_flag,field,SUM(field) OVER (PARTITION BY year_flag ORDER BY month_flag)from t ...