CSS—补充：CSS计数器、单位、@media媒体查询

目录

1. CSS计数器

嵌套计数器：

对列表元素：

2.单位

绝对长度：

相对长度：

 3.@media媒体查询

1. CSS计数器

CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。

如需使用 CSS 计数器，我们将使用以下属性：

• counter-reset - 创建或重置计数器

• counter-increment - 递增计数器值

• content - 插入生成的内容

• counter() 或 counters() 函数 - 将计数器的值添加到元素

如需使用 CSS 计数器，必须首先使用 counter-reset 创建它。

嵌套计数器：

HTML 教程：
HTML 教程
CSS 教程

Scripting 教程:
JavaScript
VBScript

XML 教程：
XML
XSL

对列表元素：

  
item
  
item   
  

    
item
    
item
    
item
    

      
item
      
item
      
item
    
    
    
item
  
  
  
item
  
item



  
item
  
item

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'); 
  }
}

举例：

  

    

      
Menu-item 1
      
Menu-item 2
      
Menu-item 3
      
Menu-item 4
      
Menu-item 5
    
  
  
  

    
调整浏览器窗口大小来查看效果！
    
如果视口为 480px 或更宽，它将向页面左侧浮动。如果视口小于 480px，则菜单将位于内容的顶部。
  

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