前端知识之:适配
2023-07-23 本文已影响0人
程序狮
rem
rem(root em)是一个相对单位，类似于em，em 是父元素字体大小。
不同的是 rem 的基准是 相对于 html 元素的字体大小。
比如，根元素(html) 设置 font-size = 12px; 非根元素设置 width: 2rem; 则换成 px 表示就是 24px
(rem: root em，意思是根元素，相对于根元素的字体大小)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html {
font-size: 14px;
}
div {
font-size: 12px;
}
p {
/* width: 10em; */
/* height: 10em; */
width: 10rem;
height: 10rem;
background-color: aqua;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
1.em，相对于父元素，一个页面有多个父元素，这些父元素的字体大小可能不一样。
2.rem，相对于根元素，一个页面只有一个根元素(html)，因此 rem 布局元素之间大小是统一的rem 的优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小来进行整体控制
使用方式
一、直接使用
在代码中配置好rem比例,代码中直接使用1rem
二、使用插件 px2rem
-1、postcss-px2rem
第一步: 安装插件
npm add postcss-px2rem
//将px转为rem，书写的时候直接写px就可以，编译的时候会将px单位自动转换为对应的rem单位
第二步:添加 rem.js文件
在utils中增加新建config/rem.js
// 基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 375
// 设置页面根节点字体大小
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
setRem()
}
第三步: 引入rem
在main.js引入rem.js文件
import './config/rem' //px转rem
第四步: 在 vue.config.js 中添加配置
const px2rem = require('postcss-px2rem');
const postcss = px2rem({
remUnit: 37.5, //基准大小 baseSize，需要和rem.js中相同
});
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
注意事项
- 代码使用px转换必须是在css文件中,直接在标签中写无效
小知识
- 对于一些布局类的样式宽度，通常采用百分比为单位，如 width: 100%; 又如配合box-sizing: border-box; 设置 width: 25%; 可控制一行放4个 div 容器。
- 对于一些小组件，如按钮、文字等，直接写设计稿上的 css 尺寸即可。如 font-size, margin, padding, height…… 即使通过 PC 或 Pad 访问也不会丢失效果。
- 响应式开发中，一般需要指定一个 min-width，这样页面尺寸缩小后，避免如按钮里面的文字不会因为外层容器宽度减小而换行。
