CSS Media Type

小蓝 • 2024-12-07 12:16 • 编程

一、基础知识

1.1 样式媒体类型

CSS媒体类型是为适应不同媒体设备的需求而设计的样式规则集合。通过不同的媒体类型可以为不同的设备提供定制化的排版和渲染效果，使得网页在不同设备上都能提供好的用户体验。

1.2 常见的媒体类型

以下是一些常见媒体类型：

@media screen {
 /* 样式规则 */
}

@media print {
 /* 样式规则 */
}

@media (min-width: 768px) and (max-width: 1024px) {
 /* 样式规则 */
}

1.3 媒体类型的应用场景

美观的网站在不同设备上都能提供好的用户体验，利用媒体查询，可以针对不同设备大小设置不同的样式，包括网页的布局，图片的大小，文本字体大小等等。人们可以用这些方法在不同设备上达到好的显示效果，比如为不同平台设置不同的页面宽度，来应对不同种类屏幕。

1.4 媒体类型的实现方式

通过@media和媒体查询来实现媒体类型。具体方法是在CSS中加上@media规则，内部指定样式规则。例如下列代码中的@media screen告知CSS渲染器，只有当媒体类型为屏幕时，应用该段代码。

@media screen {
  body {
    background-color: lightblue;
  }
}

二、常见媒体类型

2.1 screen媒体类型

screen媒体类型是默认的媒体类型，指的是那些支持颜色屏幕的设备。它可以在PC、Mac、iOS设备上使用，搭载Chrome、Safari等浏览器的设备，以及其他一些支持色彩的设备。

@media screen {
  body {
    background-color: lightgray;
  }
}

2.2 print媒体类型

print媒体类型是指打印机等输出设备的媒体类型。它定义的样式只会在内容打印时使用，并被许多浏览器支持，包含Chrome、Firefox、Safari等。print样式应考虑为设备进行特别的调整，以确保打印出的内容看起来很好看。

@media print {
  body {
    font-size: 12pt;
  }
}

2.3 handheld媒体类型

handheld媒体类型指的是便携设备（例如装有移动操作系统的智能手机）的媒体类型，其中包含部分或全部具有可视化屏幕。由于现在许多设备都是这样的，并且偏向于较小的屏幕，它是为了优化便携设备而创建的。例如如果你在iPhone打开网页，那么浏览器会使用handheld媒体类型的样式。

@media handheld {
  a {
    color: black;
  }
}

三、媒体查询的实现

3.1 媒体特性

媒体特性是通过媒体查询设置的标准，它源于媒体类型而存在的。可以放置在@media规则内部的括号内，使得样式只在满足这些特性时生效。

@media (min-width: 600px) {
  body {
    font-size: 16px;
  }
}

3.2 属性值表达式

在媒体查询中，需要根据媒体特性的值来匹配设备。这些特定媒体查询是由属性值表达式实现的。例如，上面的媒体查询只有在最小宽度大于等于600像素时才会触发。

@media (min-height: 400px), (min-width: 600px) {
  /* 样式规则 */
}

3.3 逻辑运算符

可以能同时具有多个条件，需要使用逻辑运算符来组合查询条件。具体地说，可以使用and、not和only。

/* and */
@media (min-width: 400px) and (max-height: 800px) {
  /* 样式规则 */
}

/* not */
@media not screen and (color) {
  /* 样式规则 */
}

/* only */
@media only screen and (min-width: 768px) {
  /* 样式规则 */
}

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/204199.html