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 ...
随机推荐
- react 02 组件state click
一,组件 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // 函数式组件 ret ...
- python实现Excel的表头与索引之间的转换
字母转数字 def get_index(capital): """ 大写字母(Excel列头)转索引 :param capital: 'A' --> 0, 'AA' ...
- sping入门介绍-bean标签的属性
bean标签的属性 1 .基础属性 <bean id="userDao" class="com.itheima.dao.impl.UserDaoImpl" ...
- dism修改easyu中10PEx64.wim文件
从easyu的iso镜像中提取出10PEx64.wim文件,新建一个空分区,比如Z: 1.获取wim映像索引信息,命令 Dism /Get-WimInfo /WimFile:10PEx64.wim,一 ...
- Server2008通过bat命令自动定时备份MySQL数据库
第一种方法: 环境: MySQL 安装位置:D:\MySQL 论坛数据库名称为:Db_Test 数据库备份目的地:D:\db_bak\ 1.首先新建一个bat文件 rem ************** ...
- Software_programming_tools_IDEA
13:45:55 key promtoer 快捷键提示插件
- uniapp使用百度地图
要使用第三方百度地图,首先要去百度地图官方申请一个密钥,之后引入百度地图的API文件,参考使用文档即可开发使用.而在uniapp中是没法直接引入百度地图API文件的,我们要结合uniapp中的web- ...
- leecode64. 最小路径和(动态规划)
64. 最小路径和 给定一个包含非负整数的 m x n 网格 grid ,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 示例 1: 输入:gri ...
- byte最高位
/** * 将byte转换为一个长度为8的byte数组,数组每个值代表bit */public static byte[] replaceSpace(Byte b){ byte[] array=new ...
- SVN 提交失败 Unexpected HTTP status 200 'OK' on 'PUT' request to
提交SVN 时 提示 Commit Failed Unexpected HTTP status 200 'OK' on 'PUT' request to 旧的文件在SVN 上也无法删除,删除文件 ...