CSS3 测验题

通过对CSS3 教程系统地学习,相信你已全面掌握 CSS3 媒体查询知识点,为了巩固所学的内容,我们准备了一个小测验。

通过这个测验,您可以检验自己对 CSS3 的掌握程度,发现可能需要进一步巩固的地方。


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

1. 哪个CSS3媒体查询用于检测设备是否是横屏?

  • @media (orientation: portrait)
  • @media (orientation: landscape)
  • @media (device: horizontal)
  • @media (screen: wide)

2. 哪个CSS3媒体查询用于检测设备的最小宽度为768px?

  • @media (width >= 768px)
  • @media (min-width: 768px)
  • @media (device-width: 768px)
  • @media (max-width: 768px)

3. 哪个CSS3媒体查询用于检测高对比度模式的设备?

  • @media (prefers-contrast: high)
  • @media (contrast: high)
  • @media (high-contrast: enabled)
  • @media (display: contrast)

4. 哪个CSS3媒体查询用于检测暗色模式?

  • @media (dark-mode: enabled)
  • @media (color-scheme: dark)
  • @media (theme: dark)
  • @media (prefers-color-scheme: dark)

5. 哪个CSS3媒体查询用于检测设备的屏幕分辨率?

  • @media (pixel-density: 300dpi)
  • @media (resolution: 300dpi)
  • @media (dpi: 300)
  • @media (screen-resolution: 300dpi)

6. 哪个CSS3媒体查询用于检测设备的最大宽度为1024px?

  • @media (width <= 1024px)
  • @media (device-width: 1024px)
  • @media (max-width: 1024px)
  • @media (screen-width: 1024px)

7. 哪个CSS3媒体查询用于检测设备是否是触摸屏?

  • @media (hover: none)
  • @media (touch-enabled: true)
  • @media (input: touch)
  • @media (device-type: touch)

8. 哪个CSS3媒体查询用于检测设备是否是竖屏?

  • @media (orientation: vertical)
  • @media (screen: portrait)
  • @media (device-orientation: portrait)
  • @media (orientation: portrait)

9. 哪个CSS3媒体查询用于检测设备是否支持悬停效果?

  • @media (hover: enabled)
  • @media (hover: hover)
  • @media (pointer: fine)
  • @media (input: mouse)

10. 哪个CSS3媒体查询用于检测设备的宽高比?

  • @media (ratio: 16/9)
  • @media (width-ratio: 16/9)
  • @media (aspect-ratio: 16/9)
  • @media (screen-ratio: 16/9)

11. 哪个CSS3媒体查询用于检测设备的颜色位数?

  • @media (color)
  • @media (color-depth: 8)
  • @media (bits-per-color: 24)
  • @media (display-color: true)

12. 哪个CSS3媒体查询用于检测动画是否被用户设置为减少?

  • @media (animation: reduced)
  • @media (reduce-motion: true)
  • @media (motion: none)
  • @media (prefers-reduced-motion: reduce)