admin 管理员组文章数量: 887021
rem,em,px,rpx等
1、任意浏览器的默认字体高都是16px。谷歌浏览器显示的最小字体大小是12px。
exp：突破谷歌浏览器显示12px限制。
（1）、<div>文本</div>
文本嵌套块标签，这是因为缩放只对有宽高的标签有效，缩放的时候也是将标签一起缩放，而不仅仅是缩放文本，所以如果使用span等行内标签时，还需要将行内标签进行元素转换为块元素（display:block;）
（2）、font-size：12px；
给文本设置字体12px，并设置缩放值为10/12=0.83333，也就是transform:scale(0.83)；如果要设置8px，那就是8/12=0.66666
（3）、transform-origin：0 0；
默认缩放中心点是在盒子的正中心，所以如果我们需要文本左对齐，就需要改变中心点，也就是transform-origin：0 0；该值有两个参数值，第一个是水平方位值，第二个是垂直方位值，对应的如果需要右对齐、或者是有缩进，那就改变对应的参数值即可。
（4）、white-space: nowrap;
文本进行缩放后，并不会改变其原来盒子的大小，只是视觉上改变了大小，也就是说如果文本有换行的时候，它进行缩放后仍然是折行显示，这显然不符合我们要求，所以我们还需要强制文本在一行显示，也就是 white-space: nowrap;
<!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.0"><title>Document</title><style>div {width: 300px;height: 30px;margin-bottom: 5px;background: rgb(206, 151, 151);}.box1 {font-size: 12px;}.box2 {font-size: 10px;transform: scale(0.83333);transform-origin: 0 0;white-space: nowrap;}</style>
</head>
<body><div class="box1">我是正常的12px的文字大小 Hello world!</div><div class="box1">我是正常的12px的文字大小 Hello world!</div><div class="box2">我是正常的10px的文字大小 Hello world!</div><div class="box2">我是正常的10px的文字大小 Hello world!</div>
</body>
</html>
2、em是相当于当前对象内的文本尺寸，当前对象没有那就继承父级。
3、rem是相对于html元素的字体大小。
4、em、rem一般都应用于移动端，按“设计稿/实际屏幕宽度”来按比例设置html的font-size，按比例放大或者缩小页面。如果直接写的px那在不同宽高的屏幕上都显示的一样的。
5、vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
6、rpx
- rpx是微信小程序独有的、解决屏幕自适应的尺寸单位
- 可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为 750rpx
- 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配
7、为什么web端不使用rem?
因为在大多数场景下，用户使用更大的屏幕，是想看到更多的内容，而不是更大的字。
8、1px到底有多长呢？
首先，我们要介绍分辨率这个概念，比如1024*768，代表的就是这个屏幕水平方向有1024个像素，垂直方向有768个像素。
假如这个屏幕宽度是1024cm,那么对于这个屏幕来说，水平方向上1px就是1cm（当然，一般不会有那么宽的屏幕）。
所以，1px究竟有多长，取决于分辨率，取决于屏幕大小。1px = 屏幕长度/分辨率
exp:
(1)当同一块屏幕。当你调整了分辨率，水平方向的分辨率变大，但是屏幕实际宽度还是这么大，所以1px的实际长度就变小了。
(2)当一大一小的屏幕，相同的分辨率，那么屏幕大的1px实际长度就大。
9、移动设备的物理像素、逻辑像素、设备像素比？
（1）document.documentElement.clientWidth获取的宽度都是逻辑像素
（2）在手机上物理像素是改变不了的，但是你设置的逻辑像素px，到底用多少物理像素显示，是取决于像素比的。
以渲染一个宽度铺满屏幕的div举例说明
- 情况1: 375x667（devicePixelRatio=1）、750x1334（devicePixelRatio=2），一使用px布局不会影响布局
设置div宽度为375px，那么在375x667的屏幕水平方向上，刚好由375独立像素渲染，即刚好占满屏幕全部宽度，而在750x1334屏幕上，由于该屏幕的deviceRatio为2，水平方向渲染一个css像素实际使用2个像素，即该div水平方向由750个独立像素渲染，也刚好占满屏幕，所以在这两种屏幕上，即使使用px布局，渲染效果也是一样的
- 情况2: 375x667（devicePixelRatio=1）、360x640（devicePixelRatio=1），使用px影响布局
设置div宽度为375px，那么在375x667的屏幕水平方向上，刚好由375独立像素渲染，即刚好占满屏幕全部宽度，而在360*640屏幕上，由于该屏幕的deviceRatio同为1，水平方向渲染一个css像素实际使用1个像素，即该div水平方向由375个独立像素渲染，超出屏幕宽度，布局受到影响。
（3）设计给的倍图的使用
根据设计稿设计了宽高后，像素比dpr为1，就用1倍图
像素比dpr为2，就用二倍图。因为图像实际是100px的，你设置50px，放大两倍就是100px了。
（4）1px在不同像素比上粗细不同解决方案：使用transform:scale。
exp: 很多浏览器也显示不了0.5px，这个时候也用这个属性，能显示0.5px的效果。不同内核的浏览器对小数像素的显示和处理也不同。
.border-bottom-1px {position: relative;
}.border-bottom-1px::after {content: ' ';width: 100%;height: 0;position: absolute;left: 0;bottom: 0;overflow: hidden;border-bottom: 1px black solid;transform-origin: left bottom;
}@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {.border-bottom-1px::after {-webkit-transform: scaleY(.7);transform: scaleY(.7);}
}@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {.border-bottom-1px::after {-webkit-transform: scaleY(.5);transform: scaleY(.5);}
}@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) {.border-bottom-1px ::after {-webkit-transform: scaleY(.33);transform: scaleY(.33);}
}
移动web开发相关知识 物理像素、逻辑像素、设备像素比、移动端常见布局、布局视口、视觉视口、理想视口_小杨同学呀呀呀呀的博客-CSDN博客
物理像素、逻辑像素、CSS像素、PPI、设备像素比分别是什么？ - 知乎
前端的物理像素、逻辑像素、移动端1像素边框解决方案_小凳子腿的博客-CSDN博客
总结：
在pc端直接使用px。但是不同浏览器有显示的最小字体大小和border大小，都可以使用transform:scale来实现如小于12px的字体和0.5px。
在移动端使用rem。实现等比例放大缩小。但是还有像素比这个概念，设计给的倍图就是在不同像素比的手机下怕失真才用的。
小程序使用rpx。不管宽度多宽都是750rpx。
版权声明：本文标题：rem,em,px,rpx等 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687123344h66456.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论