做个CSS单位的小demo

最新推荐文章于 2024-04-03 01:32:53 发布

程序旭~

最新推荐文章于 2024-04-03 01:32:53 发布

阅读量112

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_29843971/article/details/116064932

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

对CSS中单位的使用~

大致过一遍吧：

常用单位：

px：绝对单位，像素点

em：相对单位，如果设置font-size，就使用自己的；否则继承父标签

rem：使用html根节点字体大小

作用：用来做web app的屏幕适配，因为不同手机型号的屏幕大小都不同，所以这时候我们就不能用px来做单位，rem是适配不同手机屏幕的一种方案

支持：chrome/firefox/IE9+支持,CSS3新属性

vw：视窗宽度，1vw等于视窗宽度的1%，最大100vw

vh：视窗高度，1vh等于视窗高度的1%，最大100vh

vmin：vw和vh中较小的那个

vmax：vw和vh中较大的那个

%：百分比

以下为不常用单位：

以下单位的换算：（1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px）

in：寸

cm：厘米

mm：毫米

pt：point

pc：pica

话不多说，上demo

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

	<div class='demo px-demo'>px：像素点</div>

	<div class="demo em1-demo">em：设置font-size，就使用自己的</div>

	<div class="demo em2-demo">em：没有设置font-size，就继承父标签</div>

	<div class="demo rem-demo">rem：使用html根节点字体大小</div>

	<div class="demo vw-demo">vw：视窗宽度，1vw等于视窗宽度的1%，最大100vw</div>

 	<div class="demo vh-demo">vh：视窗高度，1vh等于视窗高度的1%，最大100vh</div>

	<div class="demo vmin-demo">vmin：vw和vh中较小的那个</div>

	<div class="demo vmax-demo">vmax：vw和vh中较大的那个</div> 

	<div class="demo percent-demo">%：百分比 </div> 

	<!-- 英寸（Inches）。绝对长度单位。
		1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px -->
	<div class="demo in-demo">in：寸</div> 

	<!-- 不常用，仅做展示 -->
	<div class="demo cm-demo">cm：厘米</div> 

	<!-- 不常用，仅做展示 -->
	<div class="demo mm-demo">mm：毫米</div> 

	<!-- 不常用，仅做展示 -->
	<div class="demo pt-demo">pt：point</div> 

	<!-- 不常用，仅做展示 -->
	<div class="demo pc-demo">pc：pica</div> 


	<div style="height: 1300px;width: 2000px;"></div><!-- 撑出滚动条使用 -->
</body>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
		font-size: 16px;  /*浏览器默认16px*/
	}
	.demo{
		width: 100%;
		height: 100%;
		margin: 10px 0;
		background: #7272f3;
	}
	.px-demo{
		width: 500px;
	}
	.em1-demo{
		font-size: 12px;
		width: 20em;  /*实际宽度：20*12*/
	}
	.em2-demo{ 
		width: 20em;  /*实际宽度：20*16*/
	}

	:root{
		font-size:36px;
	}

	.rem-demo{
		width: 20rem;  /*实际宽度：20*36*/
	}

	.vw-demo{
		width: 50vw;  /*实际宽度：可视页面的一半*/
	}

	.vh-demo{
		height: 50vh;  /*实际高度：可视页面的一半*/
	}

	.vmin-demo{
		width: 50vmin;  /*实际宽度：可视区域宽或高最小的那个的一半*/
	}

	.vmax-demo{
		width: 50vmax; /*实际宽度：可视区域宽或高最大的那个的一半*/
	}

	.percent-demo{
		width: 50%;
	}

	.in-demo{
		width: 10in;  /*实际宽度：10*96px*/
	}

	.cm-demo{
		width: 10cm;
	}

	.mm-demo{
		width: 10mm;
	}

	.pt-demo{
		width: 10pt;
	}

	.pc-demo{
		width: 10pc;
	}
</style>
</html>

实际效果：

程序旭~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
做个CSS单位的小demo

对CSS中单位的使用~大致过一遍吧：常用单位：px：绝对单位，像素点em：相对单位，如果设置font-size，就使用自己的；否则继承父标签rem：使用html根节点字体大小作用：用来做web app的屏幕适配，因为不同手机型号的屏幕大小都不同，所以这时候我们就不能用px来做单位，rem是适配不同手机屏幕的一种方案支持：chrome/firefox/IE9+支持,CSS3新属性vw：视窗宽度，1vw等于视窗宽度的1%，最大100vwvh：视窗高度，1vh等于视窗高度的1
复制链接

扫一扫