响应式网页设计是一种构建网页的方法，这些网页可以根据访问者的屏幕大小动态更改其布局和外观。大屏幕接收适合大屏幕显示的布局，而较小的设备（如移动电话）接收以适合小屏幕的方式格式化的相同网站。这种方法为所有用户提供了更好的用户体验，甚至有助于提高搜索引擎排名。CSS媒体查询是响应式web设计的重要组成部分。

媒体查询就像网站CSS文件中的小条件语句，允许您设置某些CSS规则，这些规则只有在满足特定条件时才会生效，例如屏幕大小高于或低于特定阈值时。

媒体查询现在是标准的，但非常旧的internet explorer版本不支持它们。

行动中的媒体查询

从没有任何视觉样式的结构良好的HTML文档开始。

在CSS文件中，设置页面样式并设置网站外观的基线。要使页面的字体大小为16像素，请编写以下CSS：

body { font-size: 16px; } To increase that font size for larger screens that have ample real estate to do so, start a Media Query like this: @media screen and (min-width: 1000px) { } This is the syntax of a Media Query. It starts with @media to establish the Media Query itself. Next, set the media type, which in this case is screen. This type applies to desktop computer screens, tablets, phones, etc. End the Media Query with the media feature. In our example above, that is mid-width: 1000px. This means that the Media Query kicks in for displays with a minimum width of 1000 pixels wide. After these elements of the Media Query, add an opening and closing curly brace similar to what you would do in any normal CSS rule. The final step to a Media Query is to add the CSS rules to apply after this condition is met. Insert these CSS rules between the curly braces that make up the Media Query, like this: @media screen and (min-width: 1000px) { body { font-size: 20px; } When the conditions of the Media Query are met (the browser window is at least 1000 pixels wide), this CSS style takes effect, changing our site’s font size from the 16 pixels we established originally to our new value of 20 pixels.

Adding More Styles

Place as many CSS rules within this Media Query as needed to adjust your website’s visual appearance. For example, to not only increase the font size to 20 pixels, but also change the color of all paragraphs to black (#000000), add this: @media screen and (min-width: 1000px) { body { font-size: 20px; } p { color: #000000; } }

Adding More Media Queries

Additionally, you can add more Media Queries for every larger sizes, inserting them into your styles sheet like this: @media screen and (min-width: 1000px) { body { font-size: 20px; } p { color: #000000; { } @media screen and (min-width: 1400px) { body { font-size: 24px; } } The first Media Queries kick in at 1000 pixels wide, changing the font size to 20 pixels. Then, once the browser was above 1400 pixels, the font size would change again to 24 pixels. Add as many Media Queries as needed for your particular website.

Min-Width and Max-Width

There are generally two ways to write Media Queries—by using min-width or with max-width. So far, we have seen min-width in action. This approach activates Media Queries after a browser reaches at least that minimum width. So a query that uses min-width: 1000px applies when the browser is at least 1000 pixels wide. This style of Media Query is used when you are building a site in a mobile-first manner. If you use max-width, it works in the opposite manner. A Media Query of "max-width: 1000px" applies after the browser has fallen below this size.