rem
含义
rem是CSS3的新标准,也是相对的长度单位。值是相对于根元素的字号大小来说的。
根元素的字号大小为20px时,某个子元素的宽度为8rem,即为 20 x 8 = 160px
作用
主要是为了用于移动端屏幕适配。
一般情况下,移动端的UI设计稿有640px和750px两种宽度,想要适配多种情况下的屏幕,就必须使用相对单位,而rem就是最好的选择。
媒体查询
- 先使用媒体查询,判断屏幕大小,再将屏幕宽度均分
- 640px宽的UI稿,可以分为40份,则1rem = 640px / 40 = 16px
- 750px宽的UI稿,可以分为40份,则1rem = 750px / 40 = 18.75px
特殊情况下最小屏幕为320px, 可以分为40份,则1rem = 320px / 40 = 8px
function remSize() {
let screenWidth = window.document.documentElement.clientWidth || window.innerWidth;
if (screenWidth > 750) {
screenWidth = 750;
}
if (screenWidth < 320) {
screenWidth = 320
}
console.log('screenWidth:', screenWidth);
document.documentElement.style.fontSize = (screenWidth / 40) + 'px';
document.querySelector('body').style.fontSize = 0.3 + 'rem'
}
remSize()
window.onresize = function () {
remSize()
}
flexible.js
适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕
// 安装依赖
npm install lib-flexible --save
// main.js中引入
import 'lib-flexible/flexible'
1.检查下html文件的head中,如果有 meta name="viewport"标签,需要将其注释掉。 2.html的font-size是根据屏幕宽度除以10计算出来的,所以我们需要设置页面的最大宽度是10rem
px2rem插件
// 安装依赖
npm i -D postcss-px2rem // 一般为0.3.0版本
// vue-ci3及更高版本中 vue.config.js
css: {
loaderOptions: {
postcss: {
plugins: [ require('postcss-px2rem')({ remUnit: 37.5 }) ]
}
}
}
em
含义
em也是一种相对长度单位,但值是相对自身的字号大小。如果没有设置则参照父容器的字号大小或浏览器默认字号大小
自身元素的字号大小为10px时,某个子元素的宽度为1.6rem,即为 10 x 1.6= 16px
作用
由于em是相对于自身或父元素的字号大小,在多级嵌套的场景下很容易计算错误,所以其实并不是很推荐使用,更多的情况下还是推荐使用rem
px
含义
px表示像素,就是呈现在我们显示器上的一个个小点。也是我们在css中最常用的一种单位
每个像素点都是大小等同的,所以像素为计量单位被分在了绝对长度单位中。
rpx
含义
rpx是微信小程序独有的、解决屏幕自适应的尺寸单位。
作用
主要也是为了解决移动端的屏幕适配问题。
首先不论屏幕大小,将其屏幕宽度都认定为750rpx;再通过rpx相对长度单位设置元素和字体的大小;最终小程序在不同尺寸的屏幕下都可以自动适配
rpx与px的换算
换算有一个前提,或者说是在这个前提下rpx与px的换算是理想的。就是IPhone6为基础设计的UI稿。
IPhone6的宽度正好是375px,共750个物理像素。所以 375px = 750物理像素 = 750rpx。
同时UI以Iphone6为基础设计的UI稿正好是二倍图,即实际显示为40px,但设计图尺寸为80px,可于rpx进行无缝转换,绘制页面时直接写为80rpx即可
vh、vw
含义
将屏幕宽高各分为100份,100vh为屏幕高度,100vw为屏幕宽度。
作用
vh、vw都是可以作为相对单位给元素使用的,可以实现在浏览器视窗窗口的大小发生变化时而改变自身的大小
%
含义
%也是将屏幕分为100份,默认情况下只可以给盒子设置宽度,设置高度是无效的。
作用
百分比是继承于父级元素的。想要用%给盒子设置高度,就需要给父元素设置一个固定的高度,才能生效。
vh、vw、%的区别
- vh、vw是相对于屏幕可视窗口确定的,%是相对于父级元素确定的。
- vh、vw 设置宽高是有真实高度的,但%不是