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的更多相关文章

  1. css中字体常用单位px、em、rem和%的区别及用法总结

    一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...

  2. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  3. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

  4. CSS文字大小单位px、em、pt详解

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  5. rem布局原理深度理解(以及em/vw/vh)

    一.前言 我们h5项目终端适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对 ...

  6. CSS尺寸和字体单位-em、px还是%

    在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明,重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置, ...

  7. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  8. CSS中单位px和em,rem的区别

    PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  9. 彻底弄懂css中单位px和em,rem的区别 转的自己看

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  10. 弄懂css中单位px和em,rem的区别

              国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...

随机推荐

  1. MARKDOWN操作

    我是中国人 我是中国人 字体 Hello,World! Hello,World! 引用 选择狂神说 分割线 图片 图片2 超链接 点击转到链接 列表 A B C D 表格               ...

  2. 关于视频加密ts格式转MP4的方法

    copy /b "%~dp0"\*.ts "%~dp0"\new.ts 最近在手机浏览器上下载了钢铁侠等漫威电影,觉得不错想保存到手机上,却都又是m3u8格式, ...

  3. ios打开第三方地图app

    https://www.jianshu.com/p/691dd39cb28c [ios调起 地图app]分三步: 1.配置相对于地图app的LSApplicationQueriesSchemes白名单 ...

  4. (一)用go实现单链表

    本篇,我们用go简单的实现单链表这种数据结构. 1.节点定义 type Node struct{ data int next *Node } 2.节点的添加 // 尾插法插入节点 func (p *N ...

  5. kafka配置内外网同时访问

    #内网监听名称,这个在配置文件中没有需要添加 inter.broker.listener.name=INTERNAL #内网监听规则,第一个是内网,第二个是外网,注意端口不一样,端口可以自己定义 li ...

  6. SQL Server修改表的时候出现错误:未更新任何行,未删除任何行

    无论点击什么,一直报错:未更新任何行,未删除任何行,就差点砸电脑啦. 参考这个大神才解决的问题: https://blog.csdn.net/weixin_44690047/article/detai ...

  7. 01_Node的版本管理

    Node的版本管理工具 常见的node的版本管理工具有两种N.NVM 但是他们有一个致命的问题就是不支持Windwos 但是NVM延申了一个nvm-windows的版本,他就可以很好的支持window ...

  8. H3C交换机基本操作

    Console口登录配置 1.无认证登录console <H3C>system-view [H3C]user-interface aux 0 // 进入AUX用户界面 [H3C-line- ...

  9. 5_Java对象

    面向对象编程 对于描述复杂的事物,为了从宏观上把握,从整体上合理分析,我们需要使用面向对象的思路来分析整个系统.但是,具体到微观操作,仍然需要面向过程的思路去处理. 面向对象编程(Object-Ori ...

  10. 认识JavaWeb

    JavaWeb Java Web 1.基本概念 1.1.前言 web开发: web,网页的意思 , www.baidu.com 静态web html,css 提供给所有人看的数据始终不会发生变化! 动 ...