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. 小白之Python-基础中的基础01

    Python-基础中的基础01 第一次写博客笔记,尝试并监督下自己. 每一天都值得期待! 20170803 -----------------华丽的分界线------------- Python之-- ...

  2. ISP(图像信号处理)算法概述、工作原理、架构、处理流程

    目录 ISP的主要内部构成: ISP内部包含 CPU.SUP IP(各种功能模块的通称).IF 等设备 ISP的控制结构: 1.ISP逻辑 2.运行在其上的firmware ISP上的Firmware ...

  3. repmgr部署和测试

    https://www.modb.pro/db/22029 https://blog.csdn.net/qq_34479012/article/details/125706815?app_versio ...

  4. [转载] Image Types

    转载自https://www.mathworks.com/help/matlab/creating_plots/image-types.html Image Types Indexed Images ...

  5. Cesium开发三维地图入门

    需求:要求将GLTF三维模型放到地图上展示,并且添加各种图标和线进行标注. 用CesiumJS地图库实现代码如下: 引入CesiumJS库 1.直接clone源码包,在index.html中引入,如下 ...

  6. fetchAllAssoc 小分析

    这个函数出现在了两个地方 includes\database\database.inc line 2245 includes\database\prefetch.inc line 481 foreac ...

  7. POWER BI - 根据条件,改变数值的颜色Conditional formatting

    在visual块,右键Column选择Conditional formatting 举例,比如difference > 0 显示红色,否则<0显示绿色 如何根据 measure 写特定条件 ...

  8. 解决 Outlook 的 Teams 会议加载项ID/链接等问题

    参考: https://learn.microsoft.com/zh-cn/microsoftteams/troubleshoot/meetings/resolve-teams-meeting-add ...

  9. 使用nvm安装不同版本的NodeJS

    下载及安装 下载地址:https://github.com/coreybutler/nvm-windows/releases 配置nodejs的镜像地址 nvm node_mirror https:/ ...

  10. JVMCFRE003 bad major version问题

    项目启动异常日志 [21-11-18 23:46:58:166 CST] 00000020 DispatcherSer I org.springframework.web.servlet.Framew ...