正文

vue-cli+postcss实现移动端自适应

dora_zc  2022-02-17  578

关键词：

基于 vue-cli3 创建一个移动端项目

vue add vue-h5
cd vue-h5
npm run serve

安装 postcss 相关插件

由于 vue-cli 已经内置了 postcss，只需要安装相关插件，就可以实现 vw/vh 自适应布局。

npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano

下面简单的说一下这几个插件的作用。

.postcss-px-to-viewport

用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。
我们都是使用750px宽度的视觉设计稿，那么100vw = 750px，即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。在实际撸码过程，不需要进行任何的计算，直接在代码中写px。

.postcss-aspect-ratio-mini

用来处理元素容器宽高比。

.postcss-write-svg

用来处理移动端1px的解决方案。

安装完毕后我们需要配置一下，在postcss.config.js中配置如下内容：

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, // 设计稿宽度
      viewportHeight: 1334, // 设计稿高度，可以不指定
      unitPrecision: 3, // px to vw无法整除时，保留几位小数
      viewportUnit: ‘vw‘, // 转换成vw单位
      selectorBlackList: [‘.ignore‘, ‘.hairlines‘], // 不转换的类名
      minPixelValue: 1, // 小于1px不转换
      mediaQuery: false, // 允许媒体查询中转换
      exclude: /(/|)(node_modules)(/|)/ //不转换我们引入的第三方包
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false, // 和cssnext同样具有autoprefixer，保留一个
      "postcss-zindex": false
    }
  }
}

兼容方案

如果您想要兼容所有的低版本浏览器，可以使用Viewport Units Buggyfill

引入js文件，打开public/index.html，首先在<head></head>中引入阿里cdn

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

在body中，加入如下js代码

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

如果遇到img无法显示，则添加全局css

img { 
  content: normal !important; 
}

Github 项目地址

基于vue-cli配置移动端自适应(代码片段)

...口文件main.js中引入lib-flexibleimport‘lib-flexible‘ 3.安装postcss-loader、postcss-px2rem在命令行中输入并运行：npminstallpostcss-loaderpostcss-px2rem--save 注：我用的是cnpm是因为安装了淘宝镜像，没有安装淘宝镜像就是npm 4.修改项... 查看详情

vue移动端自适应插件postcss-px-to-viewport

...长度进行构建，不需要繁琐的单位换算。安装：npminstallpostcss-px-to-viewport--save安装完成后在vue根目录下找到".postcssrc.js"文件，添加下面的配置："postcss-px-to-viewport":{viewportWi 查看详情

vue-cli3+px2rem-loader+scss移动端自适应配置

...vue移动端h5适配解决方案（remorvw）》《vue-cli3+lib-flexible+postcss-px2rem+less》查看详情

vuecli3.0安装配置移动端自适应插件(postcss-pxtorem)

1.下载lib-flexible，并在main.js中引用npmilib-flexible--save2.安装自适应插件npmipostcss-pxtorem--save或npmipostcss-px-to-viewport--save3.修改vue.config.js配置文件（若项目中没有新建一个）module.export={lintOnSave:true,css:{loaderOptions 查看详情

vue中移动端自适应的postcss-plugin-px2rem插件

...l里面的<metaname=‘viewport‘>标签删除;因为会自动添加postcss-plugin-px2rem配置内容解释安装命令npmi--savepostcss-plugi 查看详情

基于vue-cli配置手淘的lib-flexible+rem，实现移动端自适应

转自：https://segmentfault.com/a/1190000011883121没接触过flexible的建议先看看大漠的这篇文章这样你才会知道长度为什么用rem，而字体要用px安装flexiblenpminstalllib-flexible--save引入flexible在项目入口文件main.js中添加如下代码，引入flexibleimpor... 查看详情

基于vue-cli配置手淘的lib-flexible+rem，实现移动端自适应(代码片段)

...文件build/utils.js,将px2rem-loader添加到cssLoaders中，如：constpostcssLoader=loader:‘postcss-loader‘,options:sourceMap:options.sourceMapconstpx2remLoader=loader:‘px2rem-loader‘,options:remUnit:37.5//设计稿的1/10,这里假设设计稿是375px关于importLoaders：如若有疑问... 查看详情

vue3.0+vite实现移动端自适应布局

参考技术A然后再main.ts中引入amfe-flexible最后启动项目就会发现px已经是自适应的单位,如果想用原来的px只需改成大写的PX单位即可查看详情

浅谈移动端的自适应问题——响应式rem/em利用js动态实现移动端自适应

...备上具有更好的阅读体验。本文详细介绍了自适应网页的实现方法，希望能给迷惑的你带来帮助。　　一.在HTML的头部加入meta标签　　查看详情

vw实现移动端自适应页面

一、设备支持情况测试网站：https://caniuse.com/#search=vwcss3test：https://airen.github.io/css3test/，https://github.com/airen/css3test1、PC端2、mobile端二、vw的不足比如当容器使用vw单位，margin采用px单位时，很容易造成整体宽度超过100vw，从而影响... 查看详情

移动端自适应解决方案

实现移动端自适应大概的几种方法：1.固定宽度，使用一个模式加上少许的媒体查询；2.使用flexbox解决；3.使用百分比加媒体查询；4.使用rem。一、如果是简单app，排版不管分辨率怎么变，关键元素宽高和位置固定，只是元素容器... 查看详情

echars移动端自适应学习笔记

...为了解决这个问题，ECharts完善了组件的定位设置，并且实现了类似 CSSMediaQuery 的自适应能力。ECharts组件的定位和布局大部分『组件』和『系列』会遵循两种定位方式：一、left/right/top/bottom/width/height定位方式：查看详情

移动端自适应

此代码加到head标签里面，加入后可随不同机型的移动设备，设置html的fontSize大小，这样子用rem可作为解决移动端自适应的方案 !function(N,M){functionL(){vara=I.getBoundingClientRect().width;a/F>750&&(a=750*F);vard=a/10;I.style.fontSize=d+"px 查看详情

移动端自适应字体大小

设置1rem=100pxwindow.addEventListener((‘orientationchange‘inwindow?‘orientationchange‘:‘resize‘),(function(){functionc(){varhtml=document.documentElement;html.style.fontSize=100*(html.clientWidth/375)+‘ 查看详情

移动端自适应方案(代码片段)

...显示精度问题一像素显示问题，缩放导致的像素适应问题移动端的自适应问题http://www.cnblogs.com/520yan...http://www.cnblogs.com/520yan...https://mp.weixin.qq.com/s?__...https://github.com/amfe/artic...1、查看详情

移动端自适应布局方案尝试

原文地址：移动端自适应布局方案尝试问题刚开始接触移动端H5页面的时候最困扰的几个问题是：6或6p上明明是1px的边框怎么就成了2px或3px辣么粗！图片，div等如何等比自适应设计图后来慢慢知道了第一点是由于retina屏幕下设备... 查看详情

移动端开发的准备

移动端开发移动端最大问题,不能解决完全自适问题js框架的安装ui库的引入先准备转码器插件Babel移动端自适应的插件lib-flexible，postcss-plugin-px2rem 查看详情

移动端自适应rem的设置

...果有层层嵌套的话会导致这个值非常大或者非常小。在写移动端页面的时候为了使页面能够适应多种尺寸的移动设备大小，通常会用rem来表示各个元素的大小。rem：fontsizeoftherootelement，即相对于根元素字体的大小。因此，在开发... 查看详情