文章讲述了如何在HTML中设置meta标签以实现手机端自适应，以及在移动端使用REM进行适配的方法，包括通过媒体查询和JS动态设置HTML的font-size。还提到了Vue项目中使用postcss-pxtorem插件自动化px转rem的过程，并介绍了vw单位作为替代方案。此外，文章讨论了二倍图和三倍图在不同设备上的应用。
在index.html头部加入手机端自适应meta
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">一、移动端适配 rem
做移动端的适配我们就是要考虑，对于不同大小的手机屏幕，怎么动态改变页面布局中所有盒子的宽度高度、字体大小等。
这个问题我们可以使用相对单位rem。
那么什么是 rem？
rem（font size of the root element）是指相对于根元素html的字体大小的单位。简单的说它就是一个相对单位。设置 根html 的 font-size 属性，rem 是根据它的大小来动态变化整个项目中使用 rem 单位的元素大小。
比如说：我们设置了根元素字体大小为37.5px，之后如果有一个盒子宽为75px,则，我们可以给盒子设置成2rem。2rem*37.5px = 75px
那么接下来，我们要做得就是根据屏幕大小动态改变根元素的font-size了
比如说，有一个宽高都为2rem的盒子。当在一个很小的屏幕上展示的时候，我们把font-size设置为37.5px。那么这个盒子展示出来的就是75px * 75px的正方形。当在一个大屏幕上展示的时候，我们把font-size设置成75px，那么这个盒子展示出来的就是150px乘以150px的正方形。
1. rem+动态html的font-size
1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。
2.比如如下案例：
设置一个盒子的宽度是2rem；
设置不同的屏幕上html的font-size不同；
3.这样在开发中，我们只需要考虑两个问题：
问题一：针对不同的屏幕，设置html不同的font-size；
问题二：将原来要设置的尺寸，转化成rem单位；
2. rem的font-size尺寸
2.1 方案一：媒体查询
- 可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸；
- 缺点：
1.我们需要针对不同的屏幕编写大量的媒体查询；
2.如果动态改变尺寸，不会实时的进行更新；(媒体查询只能修改某个范围区间里面的html的字体大小，在这个区间里面，盒子大小都是一样的，我们是希望实时改变的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Document</title>
<style>
@media screen and (min-width: 320px) {
html {
font-size: 20px;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 24px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 28px;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 32px;
}
}
.box {
width: 5rem;
height: 5rem;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
2.2 方案二：编写js代码
- 如果希望实时改变屏幕尺寸时，font-size也可以实时更改，可以通过js代码；
- 方法：
1.根据html的宽度计算出font-size的大小，并且设置到html上；
2.监听页面的实时改变，并且重新设置font-size的大小到html上；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Document</title>
<script src="./js/hy_flexible.js"></script>
<style>
body {
font-size: 16px;
}
.box {
width: 5rem;
height: 5rem;
background-color: orange;
}
p {
font-size: 0.5rem;
}
</style>
</head>
<body>
<div class="box">
</div>
<p>我是文本</p>
<!-- 动态的修改html的font-size -->
<span>哈哈哈哈哈哈</span>
</body>
</html>
js
const baseSize = 375
// 1.获取html的元素
const htmlEl = document.documentElement;
function setRemUnit() {
// 2.获取html的宽度(视口的宽度) clientWidth是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
const htmlWidth = htmlEl.clientWidth;
// 3.根据宽度计算一个html的font-size的大小
const scale = htmlWidth / baseSize;
// 4.将font-size设置到html上
htmlEl.style.fontSize = scale * parseFloat(getComputedStyle(document.documentElement).fontSize) + 'px'
}
// 保证第一次进来时, 可以设置一次font-size
setRemUnit();
// 当屏幕尺寸发生变化时, 实时来修改html的font-size
window.addEventListener("resize", setRemUnit);
// 监听页面初次加载时候的事件
window.addEventListener("pageshow", setRemUnit);
/*
// 节流
function debounce(fn,delay = 20){
var timer = null;
return function(...args){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
fn.apply(this,args)
}, delay)
}
}
window.addEventListener("resize", debounce(setRemUnit,50));
*/3. vue项目中使用 postcss-pxtorem+amfe-flexible
1.css代码里写的px单位会在浏览器上展示为rem ：postcss-pxtorem
2.解决屏幕尺寸发生变化的时候给根节点设置值 ： amfe-flexible / lib-flexible
第一步：postcss-pxtoret 本身只负责将 px 转换为 rem，它不负责动态设置 html 标签的 font-size。你需要额外引入 lib-flexible 或手动实现类似2中 setRemUnit 的逻辑。
npm install postcss-pxtorem --save
在项目配置postcss-pxtorem，可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可：
module.exports = {
plugins: {
"postcss-pxtorem": {
// "rootValue": 37.5, // 设计稿宽度的1/10，代表 1rem=37.5px
// 配置在将px转化为rem时 1rem等于多少px(因为我们搭配使用了amfe-flexible插件 此处我们需要设置的值应是UI设计稿全屏基准宽度的十分之一)
// 当UI设计稿的全屏基准宽度是750px时 此处设置的值为75 但项目中使用了vant组件库 vant的设计稿总宽度是375px 其十分之一应是37.5(需要区分设置)
rootValue ({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75
},
viewportUnit: 'rem', // 希望使用的视窗单位
"propList": ["*"], // 需要做转化处理的css属性 * 就是所有属性都要转换，如`hight`、`width`、`margin`等，`*`表示全部
// 若想设置部分样式不转化 可以在配置项中写出
// eg: 除 border和font-size外 所有px均转化为rem
// propList: ["*", "!border","!font-size"],
"exclude": /node_modules/i, // 这里表示不处理node_modules文件下的css
"selectorBlackList": ["ignore-"], // 忽略的选择器前缀；不转换的类名
"mediaQuery": false, // 是否在媒体查询中也转换 px
"minPixelValue": 1, // 最小的 px 值才转换为 rem
"replace": true, // 是否更换属性值，而不是添加一个rem的新属性
"unitPrecision": 5 // 单位转换后的精度
}
}
}
有了这个之后，我们就不用每次去手动计算多少px需要写成多少rem了。比如我们拿到的设计稿宽度是375px(上边代码的rootValue我们写成37.5) ，里面有一个375px*375px的正方形。我们直接写375px就行，这个插件会自动帮我们计算width和height是10rem
那么，怎么动态改变根元素的字体大小呢？
第二步：引入另外一个插件，amfe-flexible/lie-flexible 页面全局适配
npm install amfe-flexible --save / npm install lie-flexible --save
-flexible会自动在html的head中添加一个 meta name="viewport" 的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。但是当分辨率大于某个特定值时，它便不再生效。
直接在main.js中引入不需要其他配置
这样就可以做到不同的屏幕大小根元素font-size不同啦。 然后页面布局我们使用的又是rem单位，那么盒子大小也就不同啦。
module.exports = {
plugins: {
autoprefixer: {},
},
}需要注意：如果我们想写死页面中的某个长度大小，比如border-radius为1px，我们只需要使用大写的PX就可。
第三步：使用postcss-write-svg可以解决1px边框问题
npm install postcss-write-svg --save-dev
# 或者如果你偏好 yarn
yarn add postcss-write-svg --dev
module.exports = {
plugins: {
'postcss-write-svg': {
utf8: false
},
},
}postcss.config.cjs 最终版：
npm install --save-dev postcss-pxtorem autoprefixer postcss-write-svg
module.exports = {
plugins: {
'postcss-write-svg': {
utf8: false
},
autoprefixer: {},
'postcss-pxtorem': {
rootValue: 375, // 设计稿宽度 / 2（例如 750 的设计稿用 375）
viewportUnit: 'rem',
minPixelValue: 1,
propList: ['*'],
exclude: /node_modules/i,
},
},
}字体变小问题，解决方案：
1.直接将出现问题的单位换成 rem/要转换的单位
2.修改插件的配置过滤掉不需要适配的样式
postcss-pxtorem弊端：
1. 发现postcss-pxtorem无法将内联样式和js中css的px转成rem，这是一个非常致命的缺点
// 解决方案
px2rem(px){
if(/%/ig.test(px)){ // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
return px
}else{
return (parseFloat(px) / 37.5) + 'rem' // 这里的37.5，和rootValue值对应
}
}
// 代码优化思想：建议将px2rem方法，放在全局，在src/main.js里写如下代码
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './routers'
import './permission.js'
import "amfe-flexible"
function px2rem(px){
if(/%/ig.test(px)){ // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
return px
}else{
return (parseFloat(px) / 37.5) + 'rem'
}
}
Vue.prototype.$px2rem = px2rem // 放到全局
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
2. Echarts图表适配（图表字体、间距、位移等尺寸自适应）:
图表容器及大小 - 概念篇 - 使用手册 - Apache ECharts
window.addEventListener('resize', function () {
myChart.resize();
});
// Echarts图表字体、间距自适应
export const fitChartSize = (size,defalteWidth = 375) => {
let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (!clientWidth) return size;
let scale = (clientWidth / defalteWidth);
return Number((size*scale).toFixed(3));
}rem 作为前端开发中常用的长度单位，虽然方便灵活，但也存在一些弊端：
-
依赖根元素字体大小:
rem的值是相对于根元素（通常是<html>元素）的font-size计算的。这意味着如果用户更改了浏览器的默认字体大小，或者开发者在其他地方修改了根元素的font-size，页面布局可能会被打乱。这对于需要精确控制布局的场景，或者需要兼容各种用户自定义设置的场景来说，是一个挑战。 尤其在移动端，用户调整字体大小的情况更为常见。如何使1rem=10px
在设置HTML{font-size：62.5%；}即可。在上述代码中，font-size：62.5%；表示将根元素html的字体大小设置为浏览器默认字体大小的62.5%，即16px * 0.625 = 10px。这个设置是为了方便将px单位转换成rem单位，因为1rem相当于根元素字体大小的倍数。
-
计算复杂性: 虽然浏览器可以处理
rem的计算，但在开发过程中，开发者需要不断地进行换算，例如将px转换为rem。这增加了开发的复杂性，尤其是在需要精细调整布局的时候。可以使用一些工具或预处理器（如Sass、Less）来简化这个过程，但仍然需要一定的学习成本。
二、其它适配方案
当前流行的几种适配方案
-
方案一：百分比设置（不推荐）
-
因为不同属性的百分比值，相对的可能是不同参照物（父元素），所以百分比往往很难统一
-
所以百分比在移动端适配中使用是非常少的
-
-
方案二：rem单位+动态html的font-size（上面已讲解）（推荐）
-
方案三：vw单位（推荐）
-
方案四：flex的弹性布局
vw 适配方案
vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度
这里的窗口分成几种情况：
在桌面端，指的是浏览器的可视区域(即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小)
像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素。
100vw 相当于整个视口的宽度 innerWidth，1vw 相当于视口宽度的 1%，将 px 转换为 vw 即可完成适配，其实上面的 rem 就是模仿 vw 方案
vw相比于rem的优势：
-
不需要去计算 html 的 font-size 大小，也不需要去给 html 设置 font-size
-
不会因为设置 html 的 font-size 大小，而必须再给 body 设置一个 font-size 防止继承
-
因为不依赖 font-size 的尺寸，所以不用担心某些原因的 html 的 font-size 尺寸被篡改，导致页面尺寸混乱
-
vw 更加语义话，1vw 相当于 1/100 viewport 的大小
-
rem 事实上作为一种过渡的方案，它利用的也是 vw 的思想
三、css中二倍图，三倍图的使用
基本概念
比如你需要一个30pt*30pt的图标，那么这时你就需要跟美工（美术工程师）要三个文件：
一个是30px*30px的PNG图片，用原名来命名即可，例如sample.png。
一个是60px*60px的PNG图片，这个要用原名@2x来命名，例如image@2x.png。
一个是90px*90px的PNG图片，这个要用原名@3x来命名，例如image@3x.png。
这样把这三张图片导入进工程，你会神奇地发现，这三个文件居然会被iOS统一识别为sample.png
应用场景
1x的图标用于1:1的屏幕，仅作为了解，现在一般都是直接使用二倍图及三倍图。
2x的图标用于1:2的屏幕，机型如iPhone 4S、iPhone 5、iPhone 5s、iPhone 6及后续的iPad等。
3x的图标目前应用于1:3的屏幕，即iPhone 6Plus，这个就比较特殊了，因为苹果为了方便开发者，想出来一个简便的实现方案，将2208*1242分辨率的图像压缩输出在1920*1080的屏幕上。
像素：PX
px就是pixel的缩写，pixel即像素，它不是自然界的长度单位。px是就是一张图片中最小的点，一张位图就是由这些点构成的。
像素是构成数码影像的基本单元，通常以像素每英寸PPI(pixels per inch)为单位来表示影像分辨率的大小。因此，像素也是指分辨率
/*默认大小*/
.photo {background-image: url(image100.png);}
/* 如果设备像素大于等于2，则用2倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2) {
.photo {
background-image: url(image200.png);
background-size: 100px 100px;
}
}
/* 如果设备像素大于等于3，则用3倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 3),
screen and (min--moz-device-pixel-ratio: 3) {
.photo {
background-image: url(image300.png);
background-size: 100px 100px;
}
}
.photo {width:100px;height:100px;}
scss写法
@mixin bg-image($url) {
background-image: url($url + "@2x.png");
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
background-image: url($url + "@3x.png")
}
}
css样式中调用 bg-image 方法
div{
width:30px;
height:20px;
background-size:30px 20px;
background-repeat:no-repeat;
@include bg-image('special_1');
}
方法二:直接使用 IMG 的 SRCSET 属性
<img width="100" height="100" src="image100.png" srcset="image200.png 2x,image300.png 3x"/>
四、uniapp 单位rpx ，设计稿尺寸px处理方式
1.使用postcss-px2rpx 插件做全局的单位转换
npm install postcss-px2rpx
2.postcss.config.js修改
module.exports = {
plugins: {
'postcss-px2rpx': {
// 设计稿宽度，默认750
designWidth: 750,
// 需要转换的最小像素值，默认1px
minPixelValue: 1,
// 转换的精度，默认5
decimalPlaces: 5
}
}
}
3.配置好后就可以直接在css文件中用px单位
在组件样式或全局样式中使用 px 单位，如：
.box {
width: 100px;
height: 50px;
}4. 构建项目：
使用 uni-app 自带的 HBuilderX 开发工具进行构建，或者在命令行中输入以下命令进行构建：
npm run dev:h5 // 构建 H5
npm run dev:mp-weixin // 构建微信小程序构建完成后，所有的 px 单位都会自动转换成 rpx 单位。
扫一扫
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
