vw 解决方案

1. 安装并配置PostCss插件

复制代码代码如下:
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

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 解决方案的更多相关文章

  1. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  2. vue-cli项目中使用vw——相比flexible更原生的移动端解决方案

    安装命令行输入: yarn add postcss-px-to-viewport 或 npm i postcss-px-to-viewport -save -dev 配置package.json中,在 ...

  3. 关于将px转换为vw vh的解决方案

    什么是vw(Viewport Width)和vh(Viewport Height)? vw和vh是前端开发中的一个动态单位,是一个相对于网页视口的单位. 系统会将视口的宽度和高度分为100份,1vw占 ...

  4. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

    原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...

  5. 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...

  6. rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设 ...

  7. 使用c3p0与DBCP连接池,造成的MySql 8小时问题解决方案

    转自:http://blog.csdn.net/wangfayinn/article/details/24623575 c3p0数据库连接池mysql8小时 目录(?)[-] 基本问题解决 项目环境 ...

  8. px,em,rem,vw单位在网页和移动端的应用

    px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...

  9. vh、vw、vmin、vmax 知多少

    介绍一些 CSS3 新增的单位,平时可能用的比较少,但是由于单位的特性,在一些特殊场合会有妙用. vw and vh 1vw 等于1/100的视口宽度 (Viewport Width) 1vh 等于1 ...

随机推荐

  1. VB|xp风格:终于解决了“图片优化软件”在部分xp系统上无法启动的问题。

    一年以来,图片优化软件一直存在一个“兼容”性问题. 因为之前的软件是在windows 2003系统上开发的,制作成安装文件后,经部分用户测试发现,在部分用户的xp系统上安装后,无法正常启动,只能听到p ...

  2. 多线程状态下调用SimpleDateFormat.format()抛出 ArrayIndexOutOfBoundsException 异常

    本来想在类的顶部设置一个 静态的SimpleDateFormat常量 public final static DateFormat dateFormatGMT = new SimpleDateForm ...

  3. 初探react(一)

    我们学习react首先是要了解react是什么,以及他的特点. React 是一个用于构建用户界面的 JAVASCRIPT 库,起源于 Facebook 的内部项目,用来架设 Instagram 的网 ...

  4. NCBI上查看SNP位点在哪个基因座上(locus)

    首先,进入NCBI的主页网站:https://www.ncbi.nlm.nih.gov/variation/view/ 进入后,在下图红色框框位置输入目的SNP,比如rs608139 输完后,出现如下 ...

  5. Selenium基于Python 进行 web 自动化测试

    配置使用环境 下载相应的浏览器驱动, Firefox 是默认的 本文以 chrome 为主 ,放在scripts目录下ChromeDriver 官方下载地址 : 所有版本的 ChromeDriver ...

  6. Mysql跨表更新

    Mysql跨表更新一直是大家所关心的话题,本文介绍mysql多表 update在实践中几种不同的写法,需要的朋友可以参考下 假定我们有两张表,一张表为Product表存放产品信息,其中有产品价格列Pr ...

  7. array_values

    $a = array( "Name" => "Peter", ", "Country" => "USA&qu ...

  8. P2885 [USACO07NOV]电话线Telephone Wire

    P2885 [USACO07NOV]电话线Telephone Wire 最近,Farmer John的奶牛们越来越不满于牛棚里一塌糊涂的电话服务于是,她们要求FJ把那些老旧的电话线换成性能更好的新电话 ...

  9. MYCAT扩容

    一.原架构图: 二.扩容 在HOST1上新增节点db_user2 在HOST2上新增节点db_user2 三.操作步骤 1.mycat 所在环境安装 mysql 客户端程序 2.mycat 的 lib ...

  10. 修改placeholder样式

    /* 修改placeholder样式,兼容性 新版火狐,IE10+ */ .login-input::-webkit-input-placeholder { color: #000; font-siz ...