CSS—补充：CSS计数器、单位、@media媒体查询
目录
1. CSS计数器
嵌套计数器：
对列表元素：
2.单位
绝对长度：
相对长度：
3.@media媒体查询
1. CSS计数器
CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。
如需使用 CSS 计数器，我们将使用以下属性：
-
counter-reset- 创建或重置计数器 -
counter-increment- 递增计数器值 -
content- 插入生成的内容 -
counter()或counters()函数 - 将计数器的值添加到元素
如需使用 CSS 计数器，必须首先使用 counter-reset 创建它。
嵌套计数器：
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>HTML 教程：</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML 教程：</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>对列表元素：
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>2.单位
绝对长度：
绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。
不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。
| 单位 | 描述 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸 (1in = 96px = 2.54cm) |
| px * | 像素 (1px = 1/96th of 1in) |
| pt | 点 (1pt = 1/72 of 1in) |
| pc | 派卡 (1pc = 12 pt) |
相对长度：
相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。
| 单位 | 描述 |
|---|---|
| em | 相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍） |
| ex | 相对于当前字体的 x-height(极少使用) |
| ch | 相对于 "0"（零）的宽度 |
| rem | 相对于根元素的字体大小（font-size） |
| vw | 相对于视口*宽度的 1% |
| vh | 相对于视口*高度的 1% |
| vmin | 相对于视口*较小尺寸的 1％ |
| vmax | 相对于视口*较大尺寸的 1％ |
| % | 相对于父元素 |
视口（Viewport）= 浏览器窗口的尺寸。如果视口为 50 厘米宽，则 1vw = 0.5 厘米。
3.@media媒体查询
相当于在不同媒体设备类型（如手机、平板、电脑、打印机等）的不同页面大小，显示格式有区别。
应用：
-
隐藏元素
-
改变元素
-
弹性布局
css3媒体类型：
| 值 | 描述 |
|---|---|
| all | 用于所有媒体类型设备。 |
| 用于打印机。 | |
| screen | 用于计算机屏幕、平板电脑、智能手机等等。 |
| speech | 用于大声“读出”页面的屏幕阅读器。 |
语法与常用的设备断点 ：
@media not|only mediatype and (expressions) {
CSS-Code;
}/* 超小型设备（电话，600px 及以下） */
@media only screen and (max-width: 600px) {...}
/* 小型设备（纵向平板电脑和大型手机，600 像素及以上） */
@media only screen and (min-width: 600px) {...}
/* 中型设备（横向平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {...}
/* 大型设备（笔记本电脑/台式机，992px 及以上） */
@media only screen and (min-width: 992px) {...}
/* 超大型设备（大型笔记本电脑和台式机，1200px 及以上） */
@media only screen and (min-width: 1200px) {...}当使用媒体查询 min-device-width 而不是 min-width 来检查设备宽度，而不是浏览器宽度。然后，当您调整浏览器窗口的大小时，图像将不会变化
/* 针对小于 400 像素的设备： */
body {
background-image: url('img_smallflower.jpg');
}
/* 针对 400 像素及更大的设备： */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}/* 针对小于 400 像素的宽度： */
body {
background-image: url('img_smallflower.jpg');
}
/* 针对 400 像素或更大的宽度： */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}举例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>调整浏览器窗口大小来查看效果！</h1>
<p>如果视口为 480px 或更宽，它将向页面左侧浮动。如果视口小于 480px，则菜单将位于内容的顶部。</p>
</div>
</div>
</body>
</html>【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】