css中rem em vh px各自代表的含义

简介: css中rem em vh px各自代表的含义

css中rem em vh px各自代表的含义


rem


rem是css3新增的一个相对单位,rem是相对于HTML根元素的字体大小来进行计算 如果没有设置HTML的字体大小,就会以浏览器默认字体大小,一般是16px。

rem除了IE8及更早版本以外,所有浏览器均支持

20210714214420286.png

20210714214829887.png


em


em子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话是相对于该元素的font-size。

如果父元素的字体尺寸未设置,则相对于浏览器默认字体大小

20210714215840554.jpg


vw/vh


vw/vh全称是Viewport Width和Viewport Height,视窗的宽度和高度,相当于屏幕宽度和高度的1%,不过,处理宽度的时候%单位更合适,处理高度的话vh单位更好。


px

px像素(Pixel) 。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。一般电脑的分辨率有 {19201024}等不同的分辨率19201024前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素。


相关文章
|
1月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
152 8
|
1月前
|
前端开发
css中px和em的区别
css中px和em的区别
43 0
|
1月前
|
前端开发
css中px和em的区别
css中px和em的区别
|
1月前
|
前端开发
CSS——如何使网页字体小于12px
CSS——如何使网页字体小于12px
14 0
|
前端开发 移动开发 Web App开发
|
1月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
18天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
1月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
1月前
|
前端开发 JavaScript
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!