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-基础中的基础03
序列,目前看来很基础,东西比较多,难度开始加大...加油吧,骚年 Python之序列 1.数据结构:序列.容器(序列:索引.映射:键).集合2.列表.元组.字符串.Unicode字符串.buffer对 ...
- uniapp引入微信小程序自定义视频组件--记录
官方文档:https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject.html 在 pages.json同级目录下 创建目录和文件: wxcomp ...
- Vue源码中的数据代理
直接开讲: 由于这个Vue底层封装的函数太多了,我这里只讲思路不说具体的执行了什么函数. const vm=new Vue({这里写一个data,可以是对象也可以是函数}) 在写这段代码的时候 ...
- 把pyecharts动图导入到PPT中
如何把echarts 动图导入PPT 置顶 且听风来 2019-05-22 14:54:17 3347 收藏 6展开 首先看PPT是否开启插件,开启后 此处就有标志,然后就在你想插入的幻灯片处插入两个 ...
- 读后笔记 -- Java核心技术(第11版 卷 II ) Chapter1 Java 8 的流库
1.1 从迭代到流的操作 迭代:for, while 流:stream().优点:1)代码易读:2)性能优化 public class CountingLongWords { public stati ...
- 日常开发记录-Object函数的内置方法Object.entries
方法1: const data = { id: 1, name: "张三", age: 22 } let params = "" /* Object.entri ...
- 什么叫SSH?原理详解。
SSH(Secure Shell,安全外壳)是一种网络安全协议,通过加密和认证机制实现安全的访问和文件传输等业务.传统远程登录或文件传输方式,例如Telnet.FTP,使用明文传输数据,存在很多的安全 ...
- mysql 取出分组后价格最高的数据
如何用mysql 取出分组后价格最高的数据 ? 看到这个问题,就想到了用 max 函数和 group by 函数,先 group by 然后取得 max, 但是这样真的可以吗? 不可以 ! 为什么? ...
- Java 接口内容小结
Java接口学习:https://www.cnblogs.com/mlllily/p/14923837.html 小结内容: 在Java9+版本中,接口内容可以有常量.抽象方法.默认方法.静态方法.私 ...
- List集合转换成数组
我现在有个需求:将File集合转换成MultipartFile数组结构 然后我就开始在网上开启了List转换到数组之旅. 首先来看一个例子 ArrayList<String> list=n ...