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作为单位的字体大小 ...
随机推荐
- 初学pwn的课程第一课
pwn的攻击基础原理 我的理解是主要通过分析主文件,然后获得有用信息,通过exploit对服务器输入指定的payload数据,获取服务器的shell,就是进入服务器的终端,获取服务器的控制权,对服务器 ...
- 23_webpack_TreeShaking
什么是TreeShaking TreeShaking,是一个术语,表示消除死代码(dead_code) JS的Tree Shaking 对JS进行TreeShaking是源自打包工具rollup这是因 ...
- 18.SQLite应用案例-课程表
一.程序界面 1.课程表首页 一周有7天,一天有10节课. 课程表首页的布局activity_main.xml框架设计大致如此: 最外层使用线性布局设置屏幕水平方向android:orientatio ...
- parted创建硬盘分区并创建LVM
基本分区创建分区只有那么大,无法调整大小,写入数据占满时便无法继续,而LVM特点就是可随意扩张大小,避免磁盘占满导致数据丢失. 查看磁盘lsblk 对磁盘进行分区 [root@localhost ~ ...
- 用JMeter对MySQL数据库进行压测
转载链接:https://www.cnblogs.com/Jadie/p/8056541.html 参考链接:https://blog.csdn.net/qq_35389417/article/det ...
- linux网卡配置模板(Rocky)
动态获取: tips: sudo nmcli con: 查询网卡UUID TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no BOOTPROTO=dhcp ...
- 学习-Vue2-Vue实例-数据与方法-Object.freeze()
Object.freeze(),会阻止修改现有的property,意味着响应系统无法再追踪变化 代码示例: <!DOCTYPE html> <html lang="en&q ...
- iOS基础 - SceneDelegate
前言 1 - 自从 Xcode11 发布以来,当你使用新 XCode 创建一个新的 iOS 项目时 SceneDelegate 会被默认创建 2 - 在 iOS 13 后 SceneDelegate ...
- SQL自动生成表结构Excel说明文档
针对已经存在表结构,快速生成整理表结构文档. SELECT字段中文名 = isnull(G.[value],''),字段名 = A.name,类型 = B.name,标识 = Case When CO ...
- 对VC中有关数据类型转换的整理
原文地址:http://spaces.msn.com/wsycqyz/blog/cns!F27CB74CE9ADA6E7!152.trak 对VC中有关数据类型转换的整理 说明:本文纯粹是总结一下 ...