常用单位 px像素 %百分比 rem em vw vh pt磅值

简介: 常用单位 px像素 %百分比 rem em vw vh pt磅值

em: 1em=16px (默认大小) 根据最近的有文字的盒子进行宽高改变(优先本身文字大小)


1em=本身文字大小/父元素文字大小/根目录文字大小


rem :  永远根据根目录文字大小进行改变


1rem=html的文字大小


三种使用方法


a. 使用px  to rem转换插件 (基于html默认大小16px进行转化)


                    物理像素:200px   css像素:6.25rem


b. 设置html文字大小为50px (基于dpr=2  方便计算)


                    物理像素:200px   css像素:100px=2rem


c. 使用flexble.js   注释原有理想视口代码(处理好了dpr)


                    物理像素:  200px    css像素:100px =2rem

相关文章
|
7月前
vw、px、vh 和 rem应用场景以及区别
【4月更文挑战第2天】 vw、px、vh 和 rem应用场景以及区别
1002 10
|
7月前
|
编解码 前端开发 小程序
CSS中rpx、px、em、rem、%、vh、vw各自都代表什么
CSS中rpx、px、em、rem、%、vh、vw各自都代表什么
141 0
|
1月前
|
UED
em/px/rem/vh/vw区别
【10月更文挑战第24天】理解和掌握 em、px、rem、vh、vw 这几种单位的特点和应用,能够帮助我们更好地进行网页设计和布局,实现更优秀的用户体验和适应不同屏幕尺寸的能力。
|
6月前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
65 1
|
5月前
|
编解码 前端开发
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
81 0
|
7月前
|
编解码 图形学 计算机视觉
viewpoint与rem、百分比、px 基础与面试题:viewpoint 与 rem、百分比高度、px
该文档介绍了网页设计中的尺寸单位,包括`viewpoint`、`rem`、百分比和像素`px`的概念和差异。`viewpoint`(如`vw/vh`)基于用户视口大小,常用于移动端适配;`rem`相对于根元素字体大小,适合做响应式设计;百分比相对于父元素尺寸,两者在响应式和基准上有所不同;像素`px`是图像和数字图形的基本单位,常用于精确布局。像素密度(PPI)影响图像清晰度,不同设备中像素表现形式不一。
|
7月前
|
编解码 前端开发 容器
vh,vw,px,%有什么区别
vh,vw,px,%有什么区别
374 0
|
7月前
|
编解码
px,em,rem,vw,vh之间的区别
px,em,rem,vw,vh之间的区别
|
7月前
|
编解码 前端开发
CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
169 0
|
编解码
1rem、1em、1vh、1px各自代表的含义?
1rem、1em、1vh、1px各自代表的含义?