CSS媒体查询中的screen关键字有何作用与用法？

CSS 媒体查询screen

一、媒体查询

CSS中的媒体查询（Media Queries）是针对不同的设备特性（如屏幕尺寸、分辨率等）应用不同样式的一种技术，通过媒体查询，可以使页面在不同设备上呈现不同的布局，实现响应式设计，媒体查询的语法如下：

@media not|only mediatype and (expressions) {
  CSSCode;
}

常见的媒体类型包括：

all: 默认，用于所有设备。

screen: 用于计算机屏幕、平板电脑、智能手机等。

print: 用于打印机。

speech: 用于屏幕阅读器。

二、逻辑运算符

and: 用于组合多个条件，所有条件都满足时才会应用样式。

,: 相当于“或”操作，任意一个条件满足时应用样式。

not: 取反，应用在不符合某个条件的设备上。

三、常见媒体特性

width,height: 视口的宽度和高度。

orientation: 设备的屏幕方向（横向landscape或纵向portrait）。

minresolution,maxresolution: 设备的分辨率。

minwidth,maxwidth: 设备屏幕的最小和最大宽度。

mindevicewidth,maxdevicewidth: 设备整个显示区域的最小和最大宽度。

mindevicepixelratio,maxdevicepixelratio: 设备的像素密度。

四、基本示例

针对不同屏幕宽度应用不同样式

/* 当屏幕宽度小于等于600px时应用此样式 */
@media screen and (maxwidth: 600px) {
  body {
    backgroundcolor: lightblue;
  }
}
/* 当屏幕宽度大于600px时应用此样式 */
@media screen and (minwidth: 601px) {
  body {
    backgroundcolor: lightgreen;
  }
}

响应式布局中常用的断点

/* 手机 */
@media screen and (maxwidth: 480px) {
  body {
    fontsize: 14px;
  }
}
/* 平板设备 */
@media screen and (minwidth: 481px) and (maxwidth: 768px) {
  body {
    fontsize: 16px;
  }
}
/* 桌面设备 */
@media screen and (minwidth: 769px) {
  body {
    fontsize: 18px;
  }
}

针对屏幕方向的媒体查询

/* 设备为横屏模式时应用此样式 */
@media screen and (orientation: landscape) {
  body {
    backgroundcolor: orange;
  }
}
/* 设备为竖屏模式时应用此样式 */
@media screen and (orientation: portrait) {
  body {
    backgroundcolor: yellow;
  }
}

针对高分辨率屏幕的媒体查询

/* 针对高分辨率屏幕 */
@media screen and (minresolution: 2dppx) {
  img {
    width: 50%;
  }
}

使用not排除某些条件

/* 应用在非屏幕设备上 */
@media not screen {
  body {
    backgroundcolor: gray;
  }
}

五、媒体查询的实际应用

媒体查询在响应式设计中应用非常广泛，可以通过它来根据设备的特性动态调整页面布局，在开发移动端友好的网站时，可以通过媒体查询在不同屏幕宽度上设置不同的字体大小、间距、布局等，使得网站在手机、平板、桌面等设备上都有良好的展示效果，以下是一些实际应用的例子：

移动优先设计

移动优先设计指的是在对台式机或任何其他设备进行设计之前，优先针对移动设备进行设计，这种方法确保了页面在较小的设备上显示得更快。

/移动优先设计默认样式适用于所有设备 */
body {
  fontsize: 14px;
}
/* 针对桌面设备进行调整 */
@media only screen and (minwidth: 768px) {
  body {
    fontsize: 18px;
  }
}

添加断点

可以在特定的断点处添加媒体查询，以调整布局和样式，在768px处添加断点：

/针对桌面设备 */
.col1 { width: 8.33%; }
.col2 { width: 16.66%; }
.col3 { width: 25%; }
.col4 { width: 33.33%; }
.col5 { width: 41.66%; }
.col6 { width: 50%; }
.col7 { width: 58.33%; }
.col8 { width: 66.66%; }
.col9 { width: 75%; }
.col10 { width: 83.33%; }
.col11 { width: 91.66%; }
.col12 { width: 100%; }
/针对手机 */
@media only screen and (maxwidth: 768px) {
  [class*="col"] {
    width: 100%;
  }
}

始终移动优先设计

始终移动优先设计意味着首先为移动设备编写样式，然后通过媒体查询覆盖这些样式以适应更大的屏幕。

/针对手机 */
[class*="col"] {
  width: 100%;
}
/针对平板电脑 */
@media only screen and (minwidth: 600px) {
  .cols1 { width: 8.33%; }
  .cols2 { width: 16.66%; }
  .cols3 { width: 25%; }
  .cols4 { width: 33.33%; }
  .cols5 { width: 41.66%; }
  .cols6 { width: 50%; }
  .cols7 { width: 58.33%; }
  .cols8 { width: 66.66%; }
  .cols9 { width: 75%; }
  .cols10 { width: 83.33%; }
  .cols11 { width: 91.66%; }
  .cols12 { width: 100%; }
}

六、相关问题与解答栏目

问题1：什么是媒体查询？如何使用媒体查询实现响应式设计？

答：媒体查询是CSS3中引入的一种技术，用于针对不同的设备特性（如屏幕尺寸、分辨率等）应用不同的样式，通过媒体查询，可以实现响应式设计，使页面在不同设备上呈现不同的布局，要使用媒体查询实现响应式设计，可以根据设备的屏幕宽度、分辨率等特性设置不同的样式规则，从而动态调整页面布局，可以使用不同的断点来调整布局和样式，以确保页面在手机、平板、桌面等设备上都有良好的展示效果，具体实现方法可以参考上述小标题“媒体查询的实际应用”下的内容。

问题2：如何针对不同屏幕尺寸设置不同的样式？请举例说明。

答：针对不同屏幕尺寸设置不同的样式，可以通过CSS中的媒体查询来实现，媒体查询允许根据设备的屏幕宽度、分辨率等特性应用不同的样式规则，可以设置当屏幕宽度小于等于600px时，背景颜色为浅蓝色；当屏幕宽度大于600px时，背景颜色为浅绿色，具体代码如下：

“css /* 当屏幕宽度小于等于600px时应用此样式 */ @media screen and (maxwidth: 600px) { body { backgroundcolor: lightblue; } } /* 当屏幕宽度大于600px时应用此样式 */ @media screen and (minwidth: 601px) { body { backgroundcolor: lightgreen; } }“这样，当设备的屏幕宽度变化时，页面的背景颜色也会相应地发生变化，从而实现针对不同屏幕尺寸设置不同的样式，更多示例可以参考上述小标题“基本示例”下的内容。