1、什么是px2rem

px2rem是一个插件能将px自动转换为rem,以适配各种不同的屏幕尺寸。前端开发可以直接使用设计稿量出的尺寸或者蓝湖给出的px进行布局,这样极大的提高了开发效率。

2、前提条件

1、vue3.x新建的项目,这里只说vue3.x的适配,因为vue2.x一般都创建很久了,或者不需要这么做了,亦或者改动代价太大,就不讨论了。

2、html文件里面添加如下meta

<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover, user-scalable=no">

3、如何使用

1、安装插件

注意postcss-pxtorem 版本过高可能导致问题,作者习惯指定5.1.1

npm install postcss-pxtorem@5.1.1 --save-dev
npm install lib-flexible --save

2、配置

package.json中添加如下代码

"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 37.5, //以375为设计稿宽度
"propList": [
"*"
]
}
}
}

3、在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

重新运行项目,这样项目css里面使用px就会自动转化为rem以适配各种屏幕尺寸。写代码过程中,直接用蓝湖或者量出的设计稿尺寸进行布局就好了,大大加快了布局效率。

4、注意事项

1、如果某一个元素不希望进行自动换算,我们有两个比较方便的办法:

1)使用style来写多少像素。

2)我们可以在单位的后面添加/no/,即可忽略当前换算。例如:

height: 44px; /*no*/

2、设计稿大于540px时,我们需要修改lib-flexible里面的限制才能使用,否则最大基准尺寸不能大于540,修改如下:

文件位置:node_modules/lib-flexible/flexible.js

if (width / dpr > 540) {
width = 540 * dpr;
}

vue3.x移动端适配px2rem的更多相关文章

  1. vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题

    公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配 ...

  2. Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】

    Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的 ...

  3. 移动端适配--flexible.js

    引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...

  4. 移动端适配方案 flexible.js

    前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...

  5. 移动端适配之REM

    随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...

  6. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  7. Rem实现移动端适配

    移动端适配 web页面跑在手机端(h5页面) 跨平台 基于webview() 基于webkit 常见适配方法 pc端采用display:inline-block,让div盒子横着排 移动web:采用定 ...

  8. web开发中移动端适配

    这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮 ...

  9. 移动端适配 rem

    前置知识: 物理像素(physical pixel,device pixel) 物理像素(设备像素),显示设备中一个最微小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度. 设备独立像素(de ...

随机推荐

  1. RTSP H264/HEVC 流 Wasm 播放

    本文将介绍 RTSP H264/HEVC 裸流如何于网页前端播放.涉及 WebSocket 代理发送流数据, Wasm 前端解码等. 代码: https://github.com/ikuokuo/rt ...

  2. Qt 程序发布以及打包成exe安装包

    一.简述 Qt 项目开发完成之后,需要打包发布程序,而因为用户电脑上没有 Qt 配置环境,所以需要将 release 生成的 exe 文件和所依赖的 dll 文件复制到一个文件夹中,然后再用 Inno ...

  3. Python常见问题 - 写入数据到 excel 报 ValueError: invalid literal for int() with base 10 错误

    背景 在上写入数据到excel中,报了以下错误 出现原因 对于写入excel场景下出现该错误的话,很大概率是写入数据的单元格原本的数据格式有问题 解决方法 清理掉单元格的旧数据,然后再写入就可以了

  4. Tensorflow保存神经网络参数有妙招:Saver和Restore

    摘要:这篇文章将讲解TensorFlow如何保存变量和神经网络参数,通过Saver保存神经网络,再通过Restore调用训练好的神经网络. 本文分享自华为云社区<[Python人工智能] 十一. ...

  5. GIT:创建、查看分支命令(git branch -vv)

    在开发过程中一般会用到Git进行版本管理,创建查看分支并与远程仓库交互是非常常见的操作. branch分支 是指在开发主线中分离出来的,做进一步开发而不影响到原来的主线. Git存储的不是一系列的更改 ...

  6. javascript对象——基本对象

    1.array对象 2.Boolean包装类对象和Date对象   3.Math对象 1到100随机数 4.RegExp对象 4.1 正则规则 如: 4.2 两种创建正则对象方式 /正则表达式/    ...

  7. [第六篇]——云服务器之Spring Cloud直播商城 b2b2c电子商务技术总结

    云服务器 云服务器(Elastic Compute Service, ECS)是一种简单高效.安全可靠.处理能力可弹性伸缩的计算服务. 云服务器管理方式比物理服务器更简单高效,我们无需提前购买昂贵的硬 ...

  8. go 1.14上怎么下载第三方包

    终端 go env -w GO111MODULE=on GOPATH-->src/pkg/bin in src源码包中 某个包中 go mod init   XXX(表示当前报的第三方依赖) 然 ...

  9. C# windows服务知识集锦

    最近公司项目,本人也是刚接触windows服务,现在把这两天上网学习的一些资料拿出来与大家分享. 1).关于windows服务安装包的制作和自动启动服务 http://blog.csdn.net/re ...

  10. Apollo 配置中心详细教程

    一.简介 Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理 ...