vue项目移动端、pc端适配方案(px转rem)
vue项目移动端、pc端适配方案
vue项目移动端、pc端适配方案
- lib-flexible 根据屏幕宽度,自动设置
html
的font-size
- postcss-px2rem 自动将
px
单位转换成rem
一、安装 lib-flexible和 postcss-px2rem
npm i lib-flexible -Snpm i postcss-px2rem -S
简要介绍这两个包的用途:
lib-flexible会为页面根据屏幕自动添加<meta name='viewport' >
标签,动态控制initial-scale
,maximum-scale
,minimum-scale
等属性的值。
postcss-px2rem会将px转换为rem用于适配不同宽度的屏幕,根据<html>
标签的font-size值来计算出结果,即1rem=html标签的font-size值。(具体可自行百度单位rem的定义)
二、引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
注意事项 由于lib-flexible会动态给页面header中添加<meta name='viewport' >
标签,所以务必请把目录 public/index.html 中的这个标签删除!!!
三、修改lib-flexible源码
因为lib-flexible主要用于手机自适应,当屏幕尺寸大于540px时,它设置html的font-size固定为54px,并不能根据屏幕尺寸调整<html>
标签的font-size的大小,所以这里需要修改lib-flexible源码。
在node-modules依赖包lib-flexible文件夹中的flexible.js文件,可以看到源码
function refreshRem(){//获取屏幕宽度var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {//这里当屏幕宽度大于540时,宽度写死为540了,所以要想电脑端也能通过rem自适应,替换成 width = width * dpr;width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}
修改替换成 width = width * dpr
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;}
四、配置postcss-px2rem
postcss-px2rem
的配置放在vue-cli3 项目中vue.config.js
文件中(找不到?可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js
)
具体配置内容如下:
module.exports = {css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({remUnit: 37.5})]}}},
}
温馨提示: remUnit这个配置项的数值是多少呢??? 通常我们是根据设计图来定这个值,原因很简单,便于开发。假如设计图给的宽度是750,我们通常就会把remUnit设置为75,这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。
那为什么你在这里写成了37.5呢???
之所以设为37.5,是为了引用像mint-ui这样的第三方UI框架,因为第三方框架没有兼容px2rem ,将remUnit的值设置为设计图宽度(这里为750px)75的一半,即可以1:1还原mint-ui的组件,否则会样式会有变化,例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时,也将值改为设计图的一半。
五、注意事项
1、对于行内样式,阿里手淘并不能将px转rem,所以对于需要自适应的样式,如font-size、width、height等请不要写在行内。同理,对于不需要转化的样式可以写在行内,或者使用PX(大写)作为单位。
2、字号不使用rem
我们都知道chrome的最小显示的字体是12px,如果字体用rem,计算出来小于12px,那么就也会以12px显示,而且我们不希望出现13px或者15px这样的奇葩尺寸,所以字体最好是用PX
(大写)来表示,至于适应,我们可以写媒体查询。
.item {border-bottom: 1PX #8d8d8d dashed;font-size: 12PX;line-height: 16PX;@media screen and (min-width: 576PX) {font-size: 14PX;line-height: 18PX;}@media screen and (min-width: 768PX) {font-size: 16PX;line-height: 28PX;}@media screen and (min-width: 992PX) {font-size: 16PX;line-height: 32PX;}@media screen and (min-width: 1200PX) {font-size: 18PX;line-height: 64PX;}
}
3、简单来讲阿里手淘的原理就是网页随着屏幕大小等比例缩放而已,所以此方案只适用于纯手机端或者pc端的适配方案,当然手机端、pc端也可以同时适配,前提是页面布局不变。一般而言,手机端、pc端共用一个项目还是建议使用栅格布局、媒体查询控制。
六、参考
vue中使用rem布局解析+大屏自适应
基于vue cli3的移动端适配问题
vue项目移动端、pc端适配方案(px转rem)相关推荐
- vue项目中:PC端导出csv或excel数据表方法及其移动端导出表格方法
需求是在前端导出人员明细表,后端只给提供json格式的数据,函数方法如下: 一:第一种方法:(不可移动端导出) // 导出明细csv格式(纯前端导出)getExport() {// this.getD ...
- php 可以做pc客户端吗,vue.js能做pc端吗
vue.js能做pc端,因为Vue是一套构建用户界面的渐进式框架,不管是用在PC端还是用在移动端,只要提供对应的API及数据相应就可以:但是PC端单页面对于搜索引擎可能不太友好,无法让搜索引擎把整个网 ...
- 移动端高清适配方案(解决图片模糊问题、1px细线问题)
移动端高清适配方案(解决图片模糊问题.1px细线问题) 参考文章: (1)移动端高清适配方案(解决图片模糊问题.1px细线问题) (2)https://www.cnblogs.com/superliz ...
- UC电脑端PC端浏览器下载,UC浏览器凉了?
近期从UC浏览器的官网找不到UC浏览器的PC端没有了 而官网只有安卓端和iOS版本了 阿里官方的客服也回复说暂时不考虑开发UC浏览器电脑端了 百度贴吧也有感觉很可惜的感觉 而今天给大家带来的就是UC浏 ...
- 多终端登录,只保留一个移动端+PC端同时在线
大家好,我是入错行的bug猫.(http://blog.csdn.net/qq_41399429,谢绝转载) 今天突然有小伙伴在群里问bug猫,多终端登录怎么搞. bug猫说,不知道百度的程序猿不是好 ...
- 移动端页面单位的选择(px em rem)
移动端页面单位的选择(px em rem) 绝对单位: px 相对单位: rem em em具有继承性 继承自直接父类 所以说在移动端很少用 浏览器默认的字体大小 16px 那么 1em= ...
- 移动/PC端的一些适配方案
一.多种屏幕(响应式) 响应式是一种在多种设备(比如pc端 移动端)不同分辨率情况下使界面展现最大程度适应尺寸的手段.响应式包含了移动端适配,也可以使移动端不同分辨率展现不同样式.移动端适配则相对精准 ...
- 基于Springboot和VUE的聊天项目,仿PC端微信
项目介绍 仿PC微言聊天室是基于前后端分离,采用SpringBoot+Vue框架开发的网页版聊天室. 使用了Spring Security安全框架进行密码的加密存储和登录登出等逻辑的处理,以WebSo ...
- Web移动端最强适配方案总结,没想到这么好用!
点击上方的终端研发部,右上角选择"设为星标" 一.前言 在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多 ...
- 移动端Web页面适配方案(整理版)
@(概述)[基本概念|百分比|rem|vw/vh|响应式设计] 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需 ...
最新文章
- 如何查看CISCO FWSM上ACL分区的空闲资源
- 王爽 汇编 实验10
- Python中json模块,字典和字符串相互转换
- Redirecting to /bin/systemctl restart sshd.service
- ICCV 2017 《Unsupervised Learning from Video to Detect Foreground Objects in Single Images》论文笔记
- OpenGL地形渲染
- LeetCode 82 删除排序链表中的重复元素||-中等
- php数组转为js json,javascript-将数组php转换为JSON时出错
- ClickHouse内核分析-MergeTree的Merge和Mutation机制
- JavaScript中带有示例的Math.max()方法
- 发那科攻丝回退参数_参数-Fanuc数控系统的攻丝拉拔动作倍率即回退速度倍率
- Connect Four四子棋c++程序 - 用户交互(1)
- Linux下DMA驱动
- 25、Java面向对象——抽象类和抽象方法、接口
- Android版计算器(java实现,包含小数、负数、括号)代码和讲解
- 天津大学计算机专硕_天津大学计算机技术专硕考研参考书
- SOA+LDAP实现SSO单点登录思路
- HTTPSConnectionPool(host=‘finance.yahoo.com‘, port=443解决方案
- webpack配置缓存
- 2019太原理工大学第二届程序设计新生赛预赛暨公开赛题解
热门文章
- linux df -hl 数据解释,linux磁盘空间查看命令(du,df)剩余空间查看详解
- spoj4487(splay)
- 前端基础—HTML制作课程表
- 【笔记】运营如何追求极致--混沌大学(抖音分享)
- 【bzoj1984】【坑】月下“毛景树” 树链剖分
- ubuntu20.4 微信,qq ,等安装安装教程
- 用svn上的文件,覆盖本地文件
- 用计算机抽样,利用计算机代替随机数骰子进行随机抽样
- 36.42. schemata
- 【Excel 教程系列第 5 篇】查找重复值