vue移动端网页适配

一、安装插件

可使用以下命令安装

cnpm install amfe-flexible --savecnpm install --save-dev autoprefixercnpm install --save-dev postcss-pxtorem

也可直接在package.json中添加依赖后install

"dependencies": {"amfe-flexible": "^2.2.1"}"devDependencies": {"postcss-pxtorem": "^5.1.1","autoprefixer": "9.8.6"}

二、在main.js中引用

// rem h5 适配
import 'amfe-flexible';

三、vue.config.js中

1、引用

const pxtorem = require('postcss-pxtorem')
const autoprefixer = require('autoprefixer')

2、插件配置

module.exports = {css: {loaderOptions: {postcss: {plugins: [// CSS前缀处理 兼容不同浏览器，这个插件主要配合打包自动添加css浏览器兼容前缀，比如-webkit-、-ms-等autoprefixer(),pxtorem({rootValue: 75, //基准值(计算公式：设计图宽度/10)，设计图尺寸为750X1134(iPhone6)，基准值为750/10=75propList: ['*']})]}}}
}

vue移动端网页适配相关推荐

vue移动端网页微信分享
vue移动端网页微信分享 1. 开篇说明 2. 过程 3. 先上代码 4. 使用说明兼容ios 5. 注意 1. 为什么请求后端接口时,url需要编码---encodeURIComponent 2. ...
二、5移动端网页适配
移动端网页适配文章目录移动端网页适配屏幕尺寸 PC分辨率视口 rem rem单位尺寸媒体查询 flexible.js 长度单位:vw/vh 屏幕尺寸屏幕对角线的长度,一般用英寸来度量 PC ...
H5移动端网页适配iPhone x/iPhone xr/iPhone 11pro/iPhone 11/iPhone 12 机型底部小黑条
iPhone x/iPhone xr/iPhone 11pro/iPhone 11/iPhone 12 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部 ...
【Vue】pc和移动端网页样式适配
在下面环节会讲解怎么做pc和移动端网页样式适配. 在当下有两种实现样式适配的:JS 适配方案和CSS 媒体查询适配.下面会具体讲解一下代码该怎么写.
解决vue移动端适配问题
解决vue移动端适配问题参考文章: (1)解决vue移动端适配问题 (2)https://www.cnblogs.com/both-eyes/p/10106021.html 备忘一下.
前端vue适配不同的分辨率_浅析 React / Vue 跨端渲染原理与实现
当下的前端同学对 React 与 Vue 的组件化开发想必不会陌生,RN 与 Weex 的跨界也常为我们所津津乐道.UI 框架在实现这样的跨端渲染时需要做哪些工作,其技术方案能否借鉴乃至应用到我们自己 ...
vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
移动端手机网页适配iPad与折叠屏设备
采用的网页适配方案:移动端页面px布局适配方案(viewport) 产生此问题的原因由于手机与平板等设备宽高比差异导致页面展示不全或者功能按钮展示在视口之外点击不到. 简单来说就是我们的页面都是瘦长 ...
vue的PC端和移动端分辨率适配
使用lib-flexible和px2rem实现移动端和PC端界面适配注释:lib-flexbles是由阿里团队很早提出解决屏幕分辨率适配的问题.现已不被推荐(因为目前比较主流的适配方案是使用vw和v ...

vue移动端网页适配

一、安装插件

二、在main.js中引用

三、vue.config.js中

1、引用

2、插件配置

vue移动端网页适配相关推荐

最新文章

热门文章