viewport适配解决方案
viewport
的单位vw、vh
vw、vh
将viewport
分成了一百份。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来开发的。因此在viewportWidth
为750px
时会出现转换问题。
// 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适配解决方案的更多相关文章
- Qt之高DPI显示器(二) - 自适配解决方案分析
目录 一.回顾 二.框架说明 1.ICallDPIChanged 2.IDPIHelper 3.悬浮窗体管理器 三.方案分析 1.窗口大小 2.字体大小 3.间距 4.图标 四.相关文章 原文链接:Q ...
- emoji表情多终端适配解决方案
emoji表情多终端适配解决方案 emoji,也叫 颜表情 是日本在无线通信中所使用的视觉情感符号,由栗田穰崇(Shigetaka Kurita)创作,并在日本网络及手机用户中流行.自苹果公司发布的i ...
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
- 移动端适配(2)——viewport适配
通过viewport来适配 <script> (function(){ var w=window.screen.width; console.log(w);//获取屏幕尺寸 var tar ...
- 【原】android【手机】屏幕适配解决方案,完美适配适配hdpi,xhdpi,xxhdpi的做法。
1.先说要怎么做,后面在慢慢讲解: 2.现在来讲解为什么要放这三套: 这三套其实按内容来说就两种,为什么这两种可以适配hdpi,xhdpi,xxhdpi呢? 那么两种类型的dimens就可以了,为什么 ...
- 低价替代Vector CANoe CAN总线适配解决方案支持所有USBCAN(周立功CAN、PCAN、Kvaser、ValueCAN、NI CAN)
在汽车通信领域CAN总线使用非常广泛,最强大的工具有Vector Case(10WRMB).Pcan(2KRMB),ZLGCAN(1.5KRMB),KVASER(2KRMB).ValueCAN(4KR ...
- iPhone X 适配解决方案
在head里添加<meta name='viewport' content='initial-scale=1, viewport-fit=cover'> 这将导致一个页面允分利用iPhon ...
- 指令汇B新闻客户端开发(六) 浅谈屏幕适配解决方案
屏幕适配的问题,我相信很多大牛的经验远比我丰富,在此就简单的分享一下我所做的的屏幕适配方案,当然我说的是安卓方面的啦,嘿嘿,屏幕适配我们一般用1280*720的屏幕作为我们的主流开发屏,当然现在And ...
- 移动端H5多终端适配解决方案
推荐三篇文章: 1.来自手淘团队的开源技术flexibal.js github地址:https://github.com/isHelenaChan/flexible 2.来自“大漠”(就职于淘宝,也是 ...
- RecyclerView使用技巧(item动画及嵌套高度适配解决方案)
原文地址 · Frank-Zhu http://frank-zhu.github.io/android/2015/02/26/android-recyclerview-part-3/?utm_sou ...
随机推荐
- Day 23 23.1:js加密算法
js加密算法 逆向重点掌握的内容: 1.逆向的思维 2.网站逆向的分析思路和步骤 注意:重点不是放在代码中,而是分析的思路和套路(技巧) 逆向到底是什么? 通俗来讲,逆向就是处理爬虫过程中对于加密数据 ...
- JDK8在xp安装办法
jdk默认不支持xp,用到了后来的api,直接没法安装. 具体安装步骤: 1.用7-zip打开jdk8的版本8u231之前的版本. 2.导航到 .rsrc\1033\JAVA_CAB10\111把里面 ...
- 使用Java API操作Neo4j
使用IntelliJ IDEA (Jet Brains) 创建java工程 把下载好的neo4j包中的lib文件下的所有jar文件复制到工程Neo4j_Project的lib文件夹下(若无lib文件夹 ...
- unzip--离线安装
centos 7 查看系统版本 [root@localhost work]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) ...
- 2022-04-27内部群每日三题-清辉PMP
1.对一个关键项目的要求是产品的持续可追溯性,质量团队建议在制造过程的每个步骤创建检查点.然而,这些检查点耗费了宝贵的时间和资源.项目经理应执行什么类型的分析来确定适当的检查点数量? A.备选方案分析 ...
- xxl-job调度任务简单使用
简介 XXL-JOB是一个分布式任务调度平台,其核心设计目标是开发迅速.学习简单.轻量级.易扩展.现已开放源代码并接入多家公司线上产品线,开箱即用. https://www.cnblogs.com/x ...
- docker搭建图片压测QPS3000+服务器(ftp+nginx)
docker搭建图片压测QPS3000+服务器(ftp+nginx) 在针对图片算法服务进行压力测试时,需要高性能的图片服务器 自己编写的图片应用性能不一定能达到要求 可能因为图片应用自身达不到压测要 ...
- vue组件自调用
组件自调用 在vue中有些情况下我们会用到组件本身来遍历出自己想要的效果. 其实非常简单,可以在模板中使用name属性值,来调用自己 <template> <el-submenu v ...
- python 对接各大数据库,快速上手!
1.mysql 安装pymysql pip intsall pymysql 快速上手 import pymysql # 第一步:连接到数据库 con = pymysql.connect(host= ...
- HIVE- 各年逐月累加函数
select year_flag,month_flag,field,SUM(field) OVER (PARTITION BY year_flag ORDER BY month_flag)from t ...