CSS尺寸设置的单位:px、rem、em、vw、vh
px:pixel像素的缩写,绝对长度单位,它的大小取决于屏幕的分辨率,是开发网页中常常使用的单位。
em:相对长度单位,在 `font-size` 中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小,如 width。如当前元素的字体尺寸未设置,由于字体大小可继承的原因,可逐级向上查找,最终找不到则相对于浏览器默认字体大小。
rem:相对长度单位,相对于根元素的字体大小,根元素字体大小未设置,使用浏览器默认字体大小。
vw:相对长度单位,相对于视窗宽度的1%。
vh:相对长度单位,相对于视窗高度的1%。
rem应用:
在移动端网页开发中,页面要做成响应式的,可使用rem配合媒体查询或者flexible.js实现。原理是通过媒体查询或者flexible.js,能够在屏幕尺寸发生改变时,重置html根元素的字体大小,页面中的元素都是使用rem为单位设置的尺寸,因此只要改变根元素字体大小,页面中的其他元素的尺寸就自动跟着修改
vw应用:由于vw被更多浏览器兼容之后,在做移动端响应式页面时,通常使用vw配合rem。原理是使用vw设置根元素html字体的大小,当窗口大小发生改变,vw代表的尺寸随着修改,无需加入媒体查询和flexible.js,页面中的其他元素仍使用rem为单位,就可实现响应式。
CSS尺寸设置的单位:px、rem、em、vw、vh的更多相关文章
- css中字体常用单位px、em、rem和%的区别及用法总结
一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- html,CSS文字大小单位px、em、pt的关系换算
html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...
- CSS文字大小单位px、em、pt详解
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
- rem布局原理深度理解(以及em/vw/vh)
一.前言 我们h5项目终端适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对 ...
- CSS尺寸和字体单位-em、px还是%
在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明,重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置, ...
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- CSS中单位px和em,rem的区别
PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- 彻底弄懂css中单位px和em,rem的区别 转的自己看
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- 弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...
随机推荐
- 第六章:用Python实现自动发送邮件和发送钉钉消息
目录 发送邮件源码 发送钉钉消息源码 源码地址 本文可以学习到以下内容: 使用requests库发送钉钉消息 使用email和smtplib库发送邮件 使用163邮箱服务,自动发送邮件及附件 发送邮件 ...
- pyspark 中的rdd api 编码练习
1,使用pyspark 的rdd api 进行了数据文件的处理,包括构建RDD, 统计分析RDD ,从文件中读取数据RDD,从文件中构建 rdd的模式shema. 然后通过模式,从rdd中生成data ...
- Linux命令 日记
命令 作用 备注 pwd 查看当前所在位置 Windows和虚拟机共享文件夹路径: cd / 打开根目录 cd /mnt/hgfs/ 共享文件夹位置路径
- 51电子-STC89C51开发板:汇编教程
全部内容请点击目录列表查看: 51电子-STC89C51开发板:<目录> --------------------------- 正文开始 ---------------------- ...
- 【数据库数据恢复】Oracle数据库数据恢复案例
数据库故障:Oracle数据库的ASM磁盘组掉线,ASM实例不能挂载.管理员尝试修复数据库但是没有成功. 数据库数据恢复方案:数据库数据恢复工程师通过分析组成ASM磁盘组的磁盘底层数据,将ASM元数据 ...
- oracle排查慢sql
查询最慢的SQL select * from (select sa.SQL_TEXT, sa.SQL_FULLTEXT, sa.EXECUTIONS "执行次数", round(s ...
- Centos 性能监控技巧
1.top监控系统进程 top 命令查看进程时可自定义刷新频率,比较直观 用法 用法:Usage: top -hv | -bcHiOSs -d secs -n max -u|U user -p pid ...
- Andorid 悬浮窗的适配指北
我们有时候需要显示一个悬浮窗,悬浮窗由服务开启,里面会有一些操作 但是我在开发时遇到高版本 Android12 和低版本4.4 ,显示不一样的地方 这边整理了下适配的方法方案 一:根据版本不一的时候, ...
- vue-用户管理系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- hibernate的校验
//不使用@valid进行校验Set<ConstraintViolation<CommonValidator>> validates = validator.validateV ...