CSS尺寸设置的单位：px、rem、em、vw、vh
2024-10-20 03:38:05
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为单位，就可实现响应式。
最新文章
- checkbox、全选反选，获取值
- hive streaming 使用shell脚本
- 【转】在C#中使用SendMessage
- Qt OpenGL三维绘图
- 使用Cxf发布Webservice服务，如果待发布的接口中有重载方法，怎么处理？？
- ASP.NET内核几大对象、ASP.NET核心知识（7）--转载
- iOS: NSMutableArray的方法removeObject:inRange:
- STM32开发指南-跑马灯实验
- HttpClient构造文件上传
- 通过游戏认识 --- JQuery与原生JS的差异
- 死磕 java集合之TreeMap源码分析（四）-内含彩蛋
- MapReduce框架原理-MapTask工作机制
- hive 表类型
- [poj1275][Cashier Employment]
- es 测试代码
- 22-hadoop-hive搭建
- 百度搜索URL参数
- Python进行数据分析（二）MovieLens 1M 数据集
- AssetBundle依赖
- SRM13 T3 花六游鸟小（结论题）