vw 解决方案
vw 解决方案
1. 安装并配置PostCss插件
2. 对 PostCss 进行配置
找到在根目录中的.postcssrc.js,对PostCSS插件进行配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
module.exports = { "plugins" : { "postcss-import" : {}, "postcss-url" : {}, // to edit target browsers: use "browserslist" field in package.json "postcss-write-svg" : { uft8: false }, "postcss-cssnext" : {}, "postcss-px-to-viewport" : { viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750 viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除) viewportUnit: 'vw' , // 指定需要转换成的视窗单位,建议使用vw selectorBlackList: [ '.ignore' , '.hairlines' ], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名 minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值 mediaQuery: false // 允许在媒体查询中转换`px` }, "postcss-viewport-units" : {}, "cssnano" : { preset: "advanced" , autoprefixer: false , // 和cssnext同样具有autoprefixer,保留一个 "postcss-zindex" : false } } } |
3. 引入viewport-units-buggyfill解决兼容问题
在 index.html 中引入js
1
2
3
4
5
6
|
<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> <script> window.onload = function () { window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks }); } </script> |
vw 解决方案的更多相关文章
- 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)
原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...
- vue-cli项目中使用vw——相比flexible更原生的移动端解决方案
安装命令行输入: yarn add postcss-px-to-viewport 或 npm i postcss-px-to-viewport -save -dev 配置package.json中,在 ...
- 关于将px转换为vw vh的解决方案
什么是vw(Viewport Width)和vh(Viewport Height)? vw和vh是前端开发中的一个动态单位,是一个相对于网页视口的单位. 系统会将视口的宽度和高度分为100份,1vw占 ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动
原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...
- 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch
rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...
- rem vh vw vmin vmax ex ch
rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设 ...
- 使用c3p0与DBCP连接池,造成的MySql 8小时问题解决方案
转自:http://blog.csdn.net/wangfayinn/article/details/24623575 c3p0数据库连接池mysql8小时 目录(?)[-] 基本问题解决 项目环境 ...
- px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
- vh、vw、vmin、vmax 知多少
介绍一些 CSS3 新增的单位,平时可能用的比较少,但是由于单位的特性,在一些特殊场合会有妙用. vw and vh 1vw 等于1/100的视口宽度 (Viewport Width) 1vh 等于1 ...
随机推荐
- VB|xp风格:终于解决了“图片优化软件”在部分xp系统上无法启动的问题。
一年以来,图片优化软件一直存在一个“兼容”性问题. 因为之前的软件是在windows 2003系统上开发的,制作成安装文件后,经部分用户测试发现,在部分用户的xp系统上安装后,无法正常启动,只能听到p ...
- 多线程状态下调用SimpleDateFormat.format()抛出 ArrayIndexOutOfBoundsException 异常
本来想在类的顶部设置一个 静态的SimpleDateFormat常量 public final static DateFormat dateFormatGMT = new SimpleDateForm ...
- 初探react(一)
我们学习react首先是要了解react是什么,以及他的特点. React 是一个用于构建用户界面的 JAVASCRIPT 库,起源于 Facebook 的内部项目,用来架设 Instagram 的网 ...
- NCBI上查看SNP位点在哪个基因座上(locus)
首先,进入NCBI的主页网站:https://www.ncbi.nlm.nih.gov/variation/view/ 进入后,在下图红色框框位置输入目的SNP,比如rs608139 输完后,出现如下 ...
- Selenium基于Python 进行 web 自动化测试
配置使用环境 下载相应的浏览器驱动, Firefox 是默认的 本文以 chrome 为主 ,放在scripts目录下ChromeDriver 官方下载地址 : 所有版本的 ChromeDriver ...
- Mysql跨表更新
Mysql跨表更新一直是大家所关心的话题,本文介绍mysql多表 update在实践中几种不同的写法,需要的朋友可以参考下 假定我们有两张表,一张表为Product表存放产品信息,其中有产品价格列Pr ...
- array_values
$a = array( "Name" => "Peter", ", "Country" => "USA&qu ...
- P2885 [USACO07NOV]电话线Telephone Wire
P2885 [USACO07NOV]电话线Telephone Wire 最近,Farmer John的奶牛们越来越不满于牛棚里一塌糊涂的电话服务于是,她们要求FJ把那些老旧的电话线换成性能更好的新电话 ...
- MYCAT扩容
一.原架构图: 二.扩容 在HOST1上新增节点db_user2 在HOST2上新增节点db_user2 三.操作步骤 1.mycat 所在环境安装 mysql 客户端程序 2.mycat 的 lib ...
- 修改placeholder样式
/* 修改placeholder样式,兼容性 新版火狐,IE10+ */ .login-input::-webkit-input-placeholder { color: #000; font-siz ...