css3新增的单位有哪些（举例说明css3新增的长度单位的使用 *** ）

今天给各位分享css3新增的单位有哪些的知识，其中也会对举例说明css3新增的长度单位的使用 *** 进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、扫盲CSS中常见的单位
2、CSS3新单位vw、vh、vmin、vmax使用详解
3、彻底弄懂css中单位px和em,rem的区别
4、em/px/rem/vh/vw设备像素、css像素、设备独立像素、dpr、ppi
5、rem,em,vh,px各自的用法?
6、css3的新单位vw、vh、vmin、vmax应该如何使用

扫盲CSS中常见的单位

1、Px（像素）单位 Px是pixel的简写，被称之为像素单位。它是计算机屏幕上的基本单位，一个像素点可以很大也可以很小，像素点越小，画质越清晰。Px单位在计算机屏幕上能达到预期效果，但在打印机和其他高分辨率设备上可能有所不同。示例图片展示了不同像素点大小对画质的影响：Pt（磅值）单位 Pt是Point的简写，被称之为磅值单位。

2、年CSS最冷门特性主要包括colorgamut和colorcontrast。colorgamut：简介：这是媒体查询中的一个特性，用于控制在不同设备域下内容的呈现。取值：它有srgb、p3和rec2020三种取值，分别对应不同的域标准。应用场景：尽管在彩要求高或专业领域有潜在价值，但在日常应用中较为罕见。

3、color-contrast() 的出现，很好的体现了如今 CSS 发展的一个大方向，更加关注用户体验，关注互联网的无障碍设计，这也是国内目前 FE 比较容易忽视的。可访问性，在我们的网站中，属于非常重要的一环，但是大部分前端（其实应该是设计、前端、产品）同学都会忽视它。

4、charset、@import、@namespace 这三个规则可以一起讲解。它们的语法简单，易于理解。其中：如果CSS文件中包含非ASCII文本，如字体名称、伪元素content属性值或选择器中的非ASCII字符，需要确保CSS解析器知道如何正确转换字节为字符，以便理解CSS代码。若发现伪元素content中的内容乱码，可能是由于未声明字符集。

CSS3新单位vw、vh、vmin、vmax使用详解

1、CSS3中的vw、vh、vmin、vmax单位使用详解如下：基本说明： vw：视窗宽度的百分比。1vw等于视窗宽度的1%。 vh：视窗高度的百分比。1vh等于视窗高度的1%。 vmin：当前视窗宽度和高度的较小值的百分比。即视窗宽度和高度中较小的那个值的1%等于1vmin。

2、vw、vh、vmin、vmax这四类视窗单位用于替代像素值，可以应用于宽度、高度、内边距、字体大小等CSS属性。浏览器会根据视窗大小动态调整这些值，使得布局适应不同尺寸的屏幕。基本说明：vw和vh相对的基准是浏览器视窗的宽度和高度，分别视窗宽度的百分比和视窗高度的百分比。

3、vmax：当前 vw 和 vh 中较大的一个值2，vw、vh 与 % 百分比的区别(1)% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。(2)vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

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

1、px：绝对单位，页面按精确像素展示。em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。rem：相对单位，可理解为”root em”，相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

2、rem也是相对的文字尺寸，和em使用 *** 接近，不同的是他仅相对于root层级的文字大小(网页中的html)。以这个范例来说，此网站的文字大小是16px，rem的尺寸就是以16px为基准，故下方的1rem会与16px相同尺寸。

3、EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以body的“font-size”为基准。另外，em是相对于父元素的属性而计算的，如果想计算px和em之间的换算，输入数据就可以px和em相互计算。

4、另外一个px点的长宽不一定是1：1的正方形，有的设备上长宽比是不一样的。em尺寸：所有现代浏览器下默认字体尺寸是16px，这时1em=16px。

em/px/rem/vh/vw设备像素、css像素、设备独立像素、dpr、ppi

px：绝对长度单位，基于显示器分辨率。用于精确控制元素的像素显示，但在不同分辨率的设备上表现可能不一致。rem：相对长度单位，但与em不同，它是相对于根元素的字体大小进行计算的。这使得整个页面的元素大小可以基于一个统一的基准进行缩放。vh：视口高度单位，表示相对于视口高度的百分比。

这些新的单位分类明确：px是绝对长度单位，基于显示器分辨率；em和rem则是相对长度单位，em基于父元素字体大小，rem则相对于根元素的字体大小。vh和vw是相对于视口尺寸的单位，适合布局视口内容。而pt则是物理像素单位，dpr表示设备像素与设备独立像素的比值，ppi衡量屏幕的像素密度。

px、em、rem、vh、vw等单位各有特点，适合不同的布局需求。例如，px适合精确控制像素大小，em适用于基于字体大小的响应式文本调整，rem则更适合作为根元素的响应式基础。在CSS中，我们通常使用px作为单位，但在PC浏览器中，1px相当于1个设备像素。

绝对单位如px，的是像素，直接对应屏幕上的物理点，尽管在设备像素比下大小可能变化，但从设计角度看，px的大小相对独立于其他元素。而em则是相对单位，以元素的字体大小为基准，如果没有指定，会默认使用浏览器的字体大小，通过设置body的font-size，如65%，可以方便地进行换算。

rem,em,vh,px各自的用法?

px适用于需要精确控制元素大小的场景，但在多设备、多分辨率的自适应方面存在限制。rpx是微信小程序独有的响应式单位，方便设计师与开发者的沟通，实现自动适配。em和rem都是相对单位，但rem更常用于全局的字体和布局调整，因为所有元素都基于根元素的字体大小进行计算。

px、rpx、em、rem、vw/vh与百分比的区别如下： px 定义：绝对长度单位，用来描述像素。特点：在CSS中，px表示一个抽象单位。在PC端，通常认为1px等于一个像素，但实际大小可能因分辨率不同而变化。因此，px并非完全设备无关。 rpx 定义：px的改进版本，由设计师在设计稿中使用。

css3的新单位vw、vh、vmin、vmax应该如何使用

2、我们需要一个覆盖整个可视区域的半透明遮罩，这个使用 vw、vh 就可以很轻易地实现。

3、vmin、vmax的应用：在设计移动页面时，如果使用vw、vh设置字体大小（如5vw），在竖屏和横屏下显示的字体大小会有所不同。通过使用vmin和vmax，可以确保文字大小在横竖屏下保持一致，从而提供更好的用户体验。

css3新增的单位有哪些的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于举例说明css3新增的长度单位的使用 *** 、css3新增的单位有哪些的信息别忘了在本站进行查找喔。

正文