CSS补充CSS计数器单位media媒体查询

JAY.LIN 收录于前端

2025-03-08 约 1429 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=146123283

CSS—补充：CSS计数器、单位、@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	用于所有媒体类型设备。
print	用于打印机。
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>

【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】