(转载)css单位px,em,rem,vw,vh,vmax,vmin

2024-01-29 13:32

本文主要是介绍(转载)css单位px,em,rem,vw,vh,vmax,vmin,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1】、px相对长度单位。像素px是相对于显示器屏幕分辨率而言的

2】、em相对长度单位。相对于当前对象内文本的字体尺寸如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(14px)。 

看下面例子: 

HTML:

<body>body
<div class="div1">div1<div class="div2">div2<div class="div3">div3</div></div>
</div>
</body>
CSS:
div{font-size:1.5em;
}
当你在每个元素内都级联em定义的字体大小将会发生什么?在下面的代码片段中我们应用和上面一模一样的CSS. 每个div从它们的父节点继承字体大小,带给我们逐渐增加的字体大小

这里写图片描述

计算关系是这样的:

body的font-size是继承自跟元素html,html的尺寸是浏览器默认尺寸14px;
div1的font-size=1.5*14px = 21px;
div2的font-size=1.5*21px = 31.5px;
div3的font-size=1.5*31.5px = 47.25px;

虽然在某些情况下可能需要这个,但是通常你可能想基于一个唯一的度量标准来按比例缩放。在这种情况下,你应该用rem。rem中的"r"代表"root";这等同于font-size基于根元素进行设置;在大多数情况下根元素为html元素。

【3】、 rem相对长度单位。r’是“root”的缩写,相对于根元素 <html> 的字体大小

例如还是上面的html代码,添加如下样式:

.div3{font-size:1.5rem;
}

这里写图片描述

此时div3的font-size = 1.5*14px = 1.5*html的font-size

【4】、vh 和 vw相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。

考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整。但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单位明确解决这一问题。

响应式(自适应大小)样例

css:

.demo {width: 100vw;font-size: 10vw;margin: 0 auto;background-color: #50688B;color: #FFF;
}
.demo2 {width: 80vw;font-size: 8vw;margin: 0 auto;
}
.demo3 {width: 50vw;font-size: 5vw;margin: 0 auto;background-color: #ff6a00;color: #FFF;
}
.demo4 {width: 10vw;height: 50vh;font-size: 1vw;margin: 0 auto;background-color: #ff006e;color: #FFF;
}
html:
<div class="container"><div class="demo"><h1>宽度50%, 字体10%</h1></div><div class="demo2"><h2>宽度80%, 字体8%</h2></div><div class="demo3"><h3>宽度50%, 字体5%</h3></div><div class="demo4"><h3>宽度10%, 高度50%, 字体1%</h3></div></div>


css3引入的”vw”和”vh”基于宽度/高度相对于窗口大小,

1 vw = view width /100

1 vh = view height /100

以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。 参照demo案例对照下面四个容器的css样式:

.demo { width: 100vw; font-size: 10vw; /* 宽度为窗口100%, 字体大小为窗口的10% */ }
.demo2 { width: 80vw; font-size: 8vw; /* 宽度为窗口80%, 字体大小为窗口的8% */ }
.demo3 { width: 50vw; font-size: 5vw; /* 宽度为窗口50%, 字体大小为窗口的5% */ }
.demo4 { width: 10vw; height: 50vh; /* 宽度为窗口10%, 容器高度为窗口的50% */ }

大家可以把demo窗口收缩来查看不同大小时候的变化。目前这款css3的应用支持所有主流浏览器,IE必须10以上。


【5】、vminvmax关于视口高度和宽度两者的最小值或者最大值

比如,浏览器的宽度设置为1200px,高度设置为800px, 1vmax = 1200/100px = 12px, 1vmin = 800/100px = 8px。

如果宽度设置为600px,高度设置为1080px, 1vmin = 6px, 1vmax = 10.8px。

例子:有一个元素,你需要让它始终在屏幕上可见:

.box { height: 100vmin; width: 100vmin;
}
这里写图片描述
如果你要让这个元素始终铺满整个视口的可见区域:
.box { 
height: 100vmax; 
width: 100vmax;
}
这里写图片描述


转自http://www.360doc.com/content/14/1001/14/21412_413667240.shtml

http://blog.csdn.net/javaloveiphone/article/details/51120476

这篇关于(转载)css单位px,em,rem,vw,vh,vmax,vmin的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/657063

相关文章

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求