前端单位的解读和换算px/%/em/rem/vh/vm/vim/vmax
px
像素 固定单位
%
相对单位 相对于最近的父元素
em
em:大小相对于font-size
例:font-size=100 10em =1000
默认 1em=16px,自己有字号大小就相对于自己如果没有就往上找
由于fontsize经常发生改动 所以项目中并不常用
rem(root em)
rem:相对于根元素(html)的字号大小
默认 1rem=16px,依旧相对于像素
所以需要找一个根据用户界面可变的单位
vw(viewport width)
vw:视口宽度,相对于窗口(视口)
满屏幕为100vw
例:如果设置成10vw就是所设置的属性是整个窗口的10%
vh(viewport height)
同 vw
平时多用vw vh多变所以用的比较少
vmin(viewport min)
vmin:相对于视口中最小那个
例:高100,宽200则动高属性发生变化
vmax(viewport max)
同 vmin
重点:
将设置到html的像素单位改成vw然后结合rem即可实现实时动态改变大小同时引出以下
vw rem px 之间的换算:
举例来换算:
vw满屏=100vw
A、如果现在设备时iphone6则物理像素为750 浏览器解析(css像素)为375(这里需要用物理除dpr )
故 100vw=375px 1vw = 3.75px
B、默认1rem = 16px (可自行设置)
故可得1rem = 16px = 4.266667vw
由于以上有误差 所以通常假设1rem=120px 此时1rem=32vw
(不同设备会设置不同的比例由开发者自己定)
偷偷告诉你其实直接用vm也可以但是要在字号大小大于12的情况下(谷歌浏览器只能识别12以上的)
12以下都是12
总结完毕 rem实战如下
方案一:
@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
方案二:
@media screen and (min-width: 320px) {html{font-size:312.5%;}}
@media screen and (min-width: 360px) {html{font-size:351.5625%;}}
@media screen and (min-width: 375px) {html{font-size:366.211%;}}
@media screen and (min-width: 400px) {html{font-size:390.625%;}}
@media screen and (min-width: 414px) {html{font-size:404.2969%;}}
@media screen and (min-width: 440px) {html{font-size:429.6875%;}}
@media screen and (min-width: 480px) {html{font-size:468.75%;}}
@media screen and (min-width: 520px) {html{font-size:507.8125%;}}
@media screen and (min-width: 560px) {html{font-size:546.875%;}}
@media screen and (min-width: 600px) {html{font-size:585.9375%;}}
@media screen and (min-width: 640px) {html{font-size:625%;}}
@media screen and (min-width: 680px) {html{font-size:664.0625%;}}
@media screen and (min-width: 720px) {html{font-size:703.125%;}}
@media screen and (min-width: 760px) {html{font-size:742.1875%;}}
@media screen and (min-width: 800px) {html{font-size:781.25%;}}
@media screen and (min-width: 960px) {html{font-size:937.5%;}}
方案三:
var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = ((window.innerWidth / designWidth) * rem2px) + 'px';
方案四:
var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%';
以上四种方法没有看懂可以参考大佬博客:rem用法剖析
博主辛苦了 我要给你点赞 我要给你关注 我要/****/嗯嗯~
好吧再给一个简便方法:::::
app.vue中设置
前端单位的解读和换算px/%/em/rem/vh/vm/vim/vmax相关推荐
- px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
- 认识css长度单位 px % em rem vh vw
目录 长度单位 px % em rem vh.vw 总结 长度单位 在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
- px,em,rem,%,vmin,vmax,vh ,vw
传统的项目开发中,我们只会用到px.%.em这几个单位,它可以适用于大部分的项目开发,并且拥有比较良好的兼容性.但是你知道吗?从css3开始,浏览器对逻辑单位的支持又提升到了另外一个境界,增加了rem ...
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- html移动端怎么做城市选择,移动端页面单位的选择(px, em, rem, vw)
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
- CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
- 移动端页面单位的选择(px em rem)
移动端页面单位的选择(px em rem) 绝对单位: px 相对单位: rem em em具有继承性 继承自直接父类 所以说在移动端很少用 浏览器默认的字体大小 16px 那么 1em= ...
- 网页布局中的 px,em,rem,pt
网页布局中的 px,em,rem,pt 设备像素:也叫物理像素,显示设备上最微小的物理部件. 比如 iphone 5:640 x 1136px. 不同的机型有不同的设备像素,固定死的. 这里需要讲一下 ...
最新文章
- java rmi反序列化漏洞 简介
- Linux sed编辑器
- 模板:二叉搜索树平衡树
- CDH spark2切换成anaconda3的问题
- 常见c#正则表达式类学习整理
- 更改via浏览器字体_【安卓】我心中的最佳手机浏览器
- js 利用数组队列模拟多线程操作
- 【转】同步的HttpClient使用详解
- Python学习笔记九:文件I/O
- python数字图像处理(6):图像的批量处理
- DPDK Release 20.08
- “fatal error C1083 ”无法打开包括文件
- matlab进化树的下载,Dendroscope(进化树显示分析软件)
- 《量子信息与量子计算简明教程》第一章·基本概念(上)
- 全国计算机等级考试-三级信息安全考试知识点(无顺序)
- 如何在网页中嵌入商务通对话框
- 对称矩阵的判定 C语言 SDUT
- 安全基础--18--嵌入式基础之系统硬件
- 计算机页面优盘页面分开,如何使用老毛桃winpe从电脑分区中拆分出一个空闲分区?...
- Excel 2010 VBA 入门 040 批量删除空行
热门文章
- 2022-09-08 mysql/stonedb-慢SQL-出现问题的SQL-Q2
- Python爬虫实现isbn查询豆瓣书籍详细信息
- pixhawk通信机制
- 笔记本上网显示连接不到服务器,笔记本无线网络连接不上
- mysql中位数函数_如何使用简单的SQL查询在MySQL中计算中位数
- 全球及中国缓控释肥行业产能规模与投资盈利能力分析报告2022版
- 统计学复习笔记(二)—— 常见的概率分布卡方分布,t分布,F分布和中心极限定理
- 随机过程(三):马尔可夫过程、马尔可夫链、转移概率、转移概率矩阵、平稳性、齐次性、时齐性、一步转移概率、一步转移概率矩阵、C-K方程、n步转移概率、n步转移概率矩阵、遍历性、极限分布、平稳分布
- ACID--事物具有的四个特征
- 20日均线操作系统法