响应式布局知识点

最新推荐文章于 2023-06-12 11:05:52 发布

小黄鸭保佑

最新推荐文章于 2023-06-12 11:05:52 发布

阅读量179

点赞数

分类专栏：个人学习

本文链接：https://blog.csdn.net/lin13958756858/article/details/107226583

版权

个人学习专栏收录该内容

29 篇文章 2 订阅

订阅专栏

1.css3视口单位：vw,vh,vmin,vmax

【视口：视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题】

vw:这是“视口宽度”单位。 1vw等于视口宽度的1％。它与百分比类似，不同之处在于，所有元素的值都保持一致，无论其父元素或父元素宽度如何

vh:这与vw（视口宽度）单位相同，只是它基于视口高度。

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

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

水平居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.parent{
			width:50vw;
			height:50vh;
			margin: 25vh auto;
			background-color: #ff0ff0;
		}
	</style>
</head>
<body>
	<div class="parent">
		
	</div>
</body>
</html>

小黄鸭保佑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局知识点

1.css3视口单位：vw,vh,vmin,vmax【视口：视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题】vw:这是“视口宽度”单位。 1vw等于视口宽度的1％。它与百分比类似，不同之处在于，所有元素的值都保持一致，无论其父元素或父元素宽度如何vh:这与vw（视口宽度）单位相同，只是它基于视口高度。vmin：当前 vw 和 vh 中较小的一个值vmax：当前 vw 和 vh 中较大的一个
复制链接

扫一扫