vue-cli3.0 移动端适配

方案：

固定一个某些宽度，使用一个模式，加上少许的媒体查询方案
使用flexbox解决方案
使用百分比加媒体查询
使用rem

用px2rem配合lib-flexible

关于移动端的适配，我喜欢用px2rem配合lib-flexible，非常方便，vue-cli3.0后，项目配置被大大精简了，这使得原来配置px2rem的文件不复存在，但其实只要掌握了正确的姿势，配置方法比原来更简单~

lib-flexible

作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
安装：yarn add lib-flexible 或者 npm install lib-flexible
引入：入口文件main.js中：import 'lib-flexible/flexible.js

"postcss": {"plugins": {"autoprefixer": {},"postcss-pxtorem": {"rootValue": 75, // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除）"propList":["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部}}},
复制代码

使用vw

以前喜欢用lib-flexible配合px2rem达到移动端适配的效果，最近了解了下vw 与 vh单位，以viewport为基准，1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一。

安装

命令行输入：yarn add postcss-px-to-viewport 或 npm i postcss-px-to-viewport -save -dev

配置

package.json中，在postcss中添加代码：

"postcss": {"plugins": {"autoprefixer": {},"postcss-px-to-viewport": {"viewportWidth": 750,"minPixelValue": 1}}},
复制代码

vue-cli3.0 移动端适配相关推荐

可视化构建工具探索之Vue Cli3.0 阿里飞冰
Vue Cli3.0可视化构建工具--Vue UI 一.安装环境安装了最新的Vue CLI.打开Terminal,输入: npm install -g @vue/cli or yarn global ...
Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题参考文章: (1)01-路由跳转安装less this.$router.re ...
vue cli3.0打包上线不同环境
vue cli3.0打包上线不同环境 1. cli3.0支持".env"文件配置,在项目的根目录下配置".env"文件,根据不同的环境命名不同的文件名称,如: ...
vue cli3.0 引入eslint 结合vscode使用
ESLint 它的目标是提供一个插件化的javascript代码检测工具. 官网地址最近一个项目里,最开始使用cli3.0搭建的时候没有默认选用eslint,导致现在有的人使用其他编辑器,就会出现格 ...
lib-flexible vue项目（移动端适配）
移动端适配步骤 1.安装lib-flexible(npm install lib-flexible --save-dev) 2.在main.js 中引入lib-flexible(import 'lib ...
【VUE】常见移动端适配方案
媒体查询 @media CSS3 中的媒体查询属性 @media 分别为不同屏幕尺寸的移动设备编写不同尺寸的 css 属性,示例如下所示: /* <375px */ @media screen ...
vue cli3.0创项目报错‘This may cause things to work incorrectly. Make sure to use the same version for b’
错误: throw new Error(^Error:Vue packages version mismatch:- vue@2.6.12 (C:\Users\Administrator\AppDat ...
vue cli3.0 修改配置文件
问题:资源找不到新版的vue-cli构建出来的项目目录没有build和config文件夹,需要改输入路径的地址,需要在项目的根目录添加一个Vue.config.js. 修改资源目录 module. ...

vue-cli3.0 移动端适配

方案：

用px2rem配合lib-flexible

lib-flexible

使用vw

安装

配置

vue-cli3.0 移动端适配相关推荐

最新文章

热门文章