媒体查询在html中怎么写,CSS3 - 使用媒体查询（media query）适配布局

1，媒体查询的作用

@media (media-feature-name: value) {

/* 符合条件时应用的样式 */

}

上面是媒体查询的基本结构，根据查看网页的设备的某些重要信息(比如屏幕大小、分辨率、颜色位深等)，页面可以分别应用不同的样式甚至替换整个样式表。

如果浏览器当前的条件与圆括号中的条件匹配，它就会采用花括号中的那些样式。如果不匹配，浏览器会忽略这些样式。

注意：浏览器始终会采用位于@media代码块之外的样式。满足条件时的媒体查询样式是在其他样式基础上应用的。

为此，条件式媒体查询样式经常要覆盖其他样式，比如隐藏之前的可见元素，把区块移动位置，调整字号等。

2，媒体查询中最常用的媒体特性(media feature)

特性名

值

应用场景

width

min-width

max-width

显示区域的宽度(对打印机而言是打印表面)

改变布局以适应非常窄(如手机)或非常宽的显示器。

height

min-height

max-height

显示区域的高度

改变布局以适应非常长或非常短的显示器

device-width

min-device-width

max-device-width

当前计算机或设备屏幕的宽度

(或打印输出时纸面的宽度)

根据不同设备(如手机)调整布局

device-height

min-device-height

max-device-height

屏幕或纸面的高度

根据不同设备(如手机)调整布局

orientation

landscape(横向)或portrait(纵向)

根据设备的朝向调整布局

device-aspect-ratio

min-device-aspect-ratio

max-device-aspect-ratio

显示区域的宽高比(1/1是正方形)

根据窗口形状调整样式(问题可能比较复杂)

color

min-color

max-color

屏幕颜色的位深

(1位表示黑白，目前主流显示器都是24位)

检查是否支持彩色输出(比如是不是黑白打印)，

或者支持的颜色数量

虽然有这么多媒体特性，但目前最流行最常用的是如下几个：

max-device-width：用于创建手机版网站

max-width：用于针对窗口宽度设定不同的样式

orientation：用于根据平板电脑或iPad的横向或者竖向来改变布局

3，使用样例一

默认情况下左栏的背景色是黄色的，当浏览器窗口小于400像素时，左栏的背景色变成橙色。当窗口继续缩小，小于300像素时，左栏的背景色变成红色。