css3新单位vw、vh、vmin、vmax深度解析与应用实例

5星 · 超过95%的资源 93 浏览量更新于2024-09-01 收藏 403KB PDF 举报

本文将详细介绍CSS3中的四个新单位vw、vh、vmin和vmax，这些单位是视窗单位，与传统的百分比单位有显著区别。vw表示视窗宽度的1%，vh则是视窗高度的1%，vmin取两者中的最小值，vmax取两者中的最大值。它们与百分比的主要区别在于，百分比是基于父元素的大小，而vw和vh是基于视口的大小，这使得它们在处理移动设备上的布局更加灵活。当涉及到移动端设计时，vmin和vmax特别有用。例如，在横屏和竖屏切换时，使用vw设置的字体大小可能会不同。通过使用vmin和vmax，可以确保文字大小在两种模式下保持一致，提供更好的用户体验。这些单位的浏览器兼容性良好，大多数现代浏览器如Chrome、Firefox、Safari、Opera和部分版本的IE以及Android和iOS设备都支持。下面是一个简单的示例，展示了如何在HTML中使用vw单位进行响应式字体设置： ```html <!DOCTYPE html> <html> <head> <style> body { font-size: 5vw; /* 使用5%的视窗宽度作为字体大小 */ } @media (orientation: landscape) { /* 当设备横屏时 */ body { font-size: 5vmax; /* 使用最大视窗宽度的5%作为字体大小 */ } } @media (orientation: portrait) { /* 当设备竖屏时 */ body { font-size: 5vmin; /* 使用最小视窗宽度的5%作为字体大小 */ } } </style> </head> <body> ... </body> </html> ``` 总结来说，理解并掌握vw、vh、vmin和vmax这些CSS3新单位对于实现响应式设计和优化移动端体验至关重要。通过合理利用这些单位，开发者能够创建适应不同屏幕尺寸和方向的网站布局，提升用户的浏览体验。

浅谈浅谈css3新单位新单位vw、、vh、、vmin、、vmax的使用详解的使用详解

主要介绍了浅谈css3新单位vw、vh、vmin、vmax的使用详解的相关资料，小编觉得挺不错的，现在分享给大

家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了css3新单位vw、vh、vmin、vmax的使用详解，分享给大家，具体如下:

1，，vw、、vh、、vmin、、vmax 的含义的含义

（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗

（Viewport）大小来决定的，单位 1，代表类似于 1%。

视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

（2）具体描述如下：

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）

vh：视窗高度的百分比

vmin：当前 vw 和 vh 中较小的一个值

vmax：当前 vw 和 vh 中较大的一个值

2，，vw、、vh 与与 % 百分比的区别百分比的区别

（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。

（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所

以这是挺不错的优势。

3，，vmin、、vmax 用处用处

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏

下保持一致。

4，浏览器兼容性，浏览器兼容性

（1）桌面 PC

Chrome：自 26 版起就完美支持（2013年2月）

Firefox：自 19 版起就完美支持（2013年1月）

Safari：自 6.1 版起就完美支持（2013年10月）

Opera：自 15 版起就完美支持（2013年7月）

IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）

（2）移动设备

Android：自 4.4 版起就完美支持（2013年12月）

iOS：自 iOS8 版起就完美支持（2014年9月）

二、一个简单的样例二、一个简单的样例

1，页面代码

视窗（Viewport）单位除了可以用来设置元素的宽高尺寸，也可以在文本中使用。下面使用 vw 设置字体大小来实现响应式文

字。

<!DOCTYPE html>

<html>

<head>

<title>hangge.com</title>

<style>

html, body, div, span, h1, h2, h3 {

margin: 0;

padding: 0;

border: 0;

}

.demo {

width: 100vw;

font-size: 5vw;

margin: 0 auto;

background-color: #50688B;

color: #FFF;

下载后可阅读完整内容，剩余8页未读，立即下载

weixin_38632488

粉丝: 11
资源: 950

css3新单位vw、vh、vmin、vmax深度解析与应用实例

min-max-font-size:使用 vw 或 vh CSS 单位？ 为您的类型设置最小或最大字体大小

浅析CSS中单位px、rem、em、vh、vw之间的区别

vh或vw单位

介绍vw、vh、vmin和vmax

css中vmax和vmin

vw/vh/px/em/rem/vmin/vmax区别

vmin vmax怎么用

postcss-px-to-viewport移动端与pc端

那在解释一下low 和 high，vmin，vmax参数的区别

css中position的使用往往需要指定left，right，top，bottom，这四者的单位可以取什么？

最新资源

min-max-font-size:使用 vw 或 vh CSS 单位？为您的类型设置最小或最大字体大小