Vue开发中的移动端适配(px转换成vw)

1.项目根目录下,创建 .postcssrc.js 文件。

2.安装插件。

-D (开发依赖)

postcss-import

postcss-url

cssnano-preset-advanced

-S (开发、运行都依赖)

postcss-aspect-ratio-mini

postcss-px-to-viewport
postcss-write-svg
postcss-cssnext
cssnano
postcss-viewport-units

3.配置  .postcssrc.js

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
      "postcss-write-svg": {
        utf8: 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,
        "postcss-zindex": false
      },
  }
}

4. 根组件 App.vue 的style 中,加入以下样式:( 统一的宽度比默认属性 )

[aspectratio] {
  position: relative;
}
[aspectratio]::before {
  content: ‘‘;
  display: block;
  width: 1px;
  margin-left: -1px;
  height: 0;
}

[aspectratio-content] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
/*vm兼容处理使用Viewport Units Buggyfill造成的副作用,需要如下设置img*/
img {
  content: normal !important;
}

比如:想要一个 750:250 的比例容器,html中的代码:

<div class="banner" w-750-250 aspectratio aspect-ratio="750/250">
     <div aspectratio-content>
        <img src=""  width="100%" height="100%">
     </div>
</div>

它对应的css样式:

[w-750-250] {
    width: 750px;
}
[w-750-250]{
    aspect-ratio:‘750:250‘;
}

5.vw的兼容处理 (有些手机不支持vw单位 )  

  5.1 Vue项目的index.html中引入如下JS 文件: 

<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>

  5.2 在html底部调用 viewport-units-buggyfill

<script>
    window.onload = function () {
      window.viewportUnitsBuggyfill.init({
        hacks: window.viewportUnitsBuggyfillHacks
      });
</script>

6.自己没用第5点的方式使用 viewport-units-buggyfill,而是使用了 npm 安装的方式引入。

  6.1 npm  install  viewport-units-buggyfill  -S

  6.2 项目的入口文件中(比如 main.js),引入:

var hacks = require(‘viewport-units-buggyfill.hacks‘);
require(‘viewport-units-buggyfill‘).init({
  hacks: hacks
});

  

注:详细的配置说明,可以阅读  https://www.w3cplus.com/mobile/vw-layout-in-vue.html   这一篇好文。

本文只是学习并实践后的总结。插件不是都必须安装,可根据实际项目需要,自行决定。

原文地址:https://www.cnblogs.com/zy20160429/p/8915637.html

时间: 2024-11-05 19:26:20

Vue开发中的移动端适配(px转换成vw)的相关文章

DB2中如何将非自动存储转换成自动存储空间管理方式

DB2 10引入根据温度管理数据存储的表空间更管理方式,但是需要数据库启用自动存储管理,具体在存储路径在某个目录下即可,要讲非自动存储的表空间转换成自动存储的管理方式需要两个步骤,尤其是从低版本升级过来的数据库. ALTER DATABASE EMPLOYEE ADD STORAGE ON '/data' 这样即可,但是对于原来使用DMS或SMS方式管理的表空间需要做重定向恢复,其实就是先做全备份,然后指定redirect restore即可,在原来的实例下恢复: RESTORE DATABAS

js中使用eval()方法将字符串转换成日期格式、并获取指定时间的日期

1.在js中eval()方法将字符串格式数据转换成日期格式 function getDate(strDate) {         //strDate为需要转换成日期格式的字符串         var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/,                 function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');    

办公中的PDF文件怎么在线转换成可编辑的TXT文档

办公中的PDF文件怎么在线转换成可编辑的TXT文档,TXT格式一般阅读起来比较方便,特别是看文件小说什么的都比较适合转换成TXT格式存在手机里观看,因此我们经常需要将PDF文件转换成TXT文件,那怎么转换的呢,请看下面的介绍. 搜索关键词迅捷PDF在线转换器,点开界面. 点开转换器首页,点击文档转换,在下拉框中找到PDF转TXT. 点击选择文件,弹出文件夹选项,选择你需要转换的PDF文件添加. 选择完文件后,点击开始转换. 文件转换需要一些时间,耐心等待转换进度完成. 转换完成后,可点选择直接打

工作中的CAD图纸文件怎么转换成BMP格式后保存桌面?

工作中的CAD图纸文件怎么转换成BMP格式后保存桌面?BMP格式是CAD图纸文件的一种,为了方便将CAD图纸文件进行打开查看都会需要进行的操作步骤就是将其进行格式间的转换操作成图片的格式,CAD转BMP就是其中一种,具体应该怎么样进行操作,下面小编就要来教大家的就是工作中的CAD图纸文件怎么转换成BMP格式后保存桌面的全部操作步骤,希望能够帮助到你们,望采纳! 步骤一:首先需要打开电脑上面的迅捷CAD转换器,电脑上面没有这款迅捷CAD转换器的就可以去到迅捷CAD官网上面进行下载安装! 步骤二:完

(转)为什么HashMap中链表长度超过8会转换成红黑树

原博地址:https://blog.csdn.net/xingfei_work/article/details/79637878 HashMap在jdk1.8之后引入了红黑树的概念,表示若桶中链表元素超过8时,会自动转化成红黑树:若桶中元素小于等于6时,树结构还原成链表形式. 原因: 红黑树的平均查找长度是log(n),长度为8,查找长度为log(8)=3,链表的平均查找长度为n/2,当长度为8时,平均查找长度为8/2=4,这才有转换成树的必要:链表长度如果是小于等于6,6/2=3,虽然速度也很

mysql中int型的数字怎么转换成字符串

字段:number  是integer类型    在表test中 select cast(number as char) as number from test; 或者convert()方法.因为转换的时候mysql不支持转换成varchar所有要转成char. /* 比如将123转换为char类型 */ SELECT CAST(123 AS CHAR); /* 或者使用concat方法 */ SELECT CONCAT(123,''); 原文地址:https://www.cnblogs.com

为什么HashMap中链表长度超过8会转换成红黑树

HashMap在jdk1.8之后引入了红黑树的概念,表示若桶中链表元素超过8时,会自动转化成红黑树:若桶中元素小于等于6时,树结构还原成链表形式. 原因: 红黑树的平均查找长度是log(n),长度为8,查找长度为log(8)=3,链表的平均查找长度为n/2,当长度为8时,平均查找长度为8/2=4,这才有转换成树的必要:链表长度如果是小于等于6,6/2=3,虽然速度也很快的,但是转化为树结构和生成树的时间并不会太短. 还有选择6和8的原因是: 中间有个差值7可以防止链表和树之间频繁的转换.假设一下

移动端适配px转rem(VUE)

<script type="text/javascript"> document.getElementsByTagName("html")[0].style.fontSize = 100 / 750 * window.screen.width + "px"; </script> 原文地址:https://www.cnblogs.com/Glant/p/11643630.html

app开发中,苹果端可编辑标签,无法输入内容解决方案

在app开发,在使用div的contentedstable属性时,出现ios端编辑框无法选择聚焦的问题,查阅资料后发现是fastclick.js中的判断导致的. 1.解决方法, a.引入“.needsclick{content: attr(placeholder);}”,类名,“needsclick”命名尽量不要修改. b.在contentedsTable 属性标签中添加内敛样式“-webkit-user-select: auto;” 2.fastclick.js中的导致不能编辑的代码 事件的分