PC端自适应（vue）移动端+vant

npm i lib-flexible -S
npm i px2rem-loader -D

安装完成以后在main.js引入

import 'lib-flexible'

在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 1920px。

//utils.js
const cssLoader = {loader: 'css-loader',options: {sourceMap: options.sourceMap}}const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 192}}

下面loader函数

function generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}

最后一步，修改flexible.js

function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = width * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}

将540dpr改为widthdpr

移动端使用Vant的话应将

` const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 37.5   //设置未37.5 才不会导致缩小}}`

PC端自适应（vue）移动端+vant相关推荐

php 网站移动端自适应,HTML5 移动端自适应布局
场景:为适应各种大小的屏幕自适应布局我知道的两种方式 1.使用媒体查询,下面制定了几种适应方式,例如第一个表示屏幕宽度在320px-360px之间的,html字体大小适配为13.65px @medi ...
vue 移动端PC端选用的ui框架
1.pc端的项目,最好的选择是ElementUI.(pc端) 一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.Element是饿了么前端开源维护的Vue UI组件库,更新频率 ...
Vue PC端框架和Vue移动端UI框架
Vue PC端框架和Vue移动端UI框架在学习Vue的过程之中,我发现不管是 BAT 大厂,还是创业公司,Vue 都有着广泛的应用,而且框架层出不穷,学习文档也越来越多,Vue也越来越受欢迎.下面是 ...
php 可以做pc客户端吗,vue.js能做pc端吗
vue.js能做pc端,因为Vue是一套构建用户界面的渐进式框架,不管是用在PC端还是用在移动端,只要提供对应的API及数据相应就可以:但是PC端单页面对于搜索引擎可能不太友好,无法让搜索引擎把整个网 ...
vue移动端表格吸顶、行自适应高度、列左侧固定悬浮
简介 1.表头吸顶效果 2.左侧列固定,右侧滑动,表头跟随内容滑动 3.行高自适应番外最近上海疫情,居家办公一月多了,愿阴霾散去.最近网上在正常得市民抱怨中,有很多别有用心之人,数典忘祖,造谣生事 ...
vue h5 端实现富文本图片预览（基于 Vant UI 的 ImagePreview 组件）
文章目录 vue h5 端实现富文本图片预览(基于 Vant UI 的 ImagePreview 组件) 预览效果关键代码使用案例 vue h5 端实现富文本图片预览(基于 Vant UI 的 I ...
Vue 移动端、PC 端适配
Vue 移动端.PC 端适配可以使用 lib-flexible.amfe-flexible.postcss-pxtorem.postcss-px2rem 和 postcss-px-to-viewpor ...
vue移动端自适应布局
vue移动端自适应布局根据postcss-pxtorem来实现自动渲染px至rem,不用再进行手动计算一.实现方式 postcss-pxtorem:将px转换为rem: amfe-flexible ...
vue 在结合 vant 写移动端时上传图片之前，压缩图片大小
认定了就要好好的珍惜对待,人生不容辜负,你必须要更加努力 .加油骚年. 正文: vue 在结合 vant 写移动端的时上传图片给后台一般是直接上传整个文件那么肯定对图片的大小有限制这时候就需要 ...
5 款最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐> Vue 移动端 UI 组件库推荐 Vant 3 - 有赞移动 UI 组件库,支持 Vue 3 微信小程序 ...

PC端自适应（vue）移动端+vant

PC端自适应（vue）移动端+vant相关推荐

最新文章

热门文章

PC端自适应（vue） 移动端+vant

PC端自适应（vue） 移动端+vant相关推荐

最新文章

热门文章

PC端自适应（vue）移动端+vant

PC端自适应（vue）移动端+vant相关推荐