三分钟学会CSS自适应——媒体查询

小波

1年前更新

220

文章目录[隐藏]

媒体查询（Media Queries）：
基本语法：
例子：
完整模板：

媒体查询（Media Queries）：

所谓的使用CSS3的媒体查询功能，根据设备的特性（如屏幕宽度、高度、分辨率等）设置不同的CSS样式。通过针对不同屏幕尺寸编写不同的样式规则，实现响应式布局，说白了就是更具不同的设备设置不同的CSS属性。

基本语法：

@media media-type and (media-feature) {
  /* 应用的样式规则 */
}

@media：媒体查询的关键字，用于指示该规则是一个媒体查询。
media-type：媒体类型，可以是all（所有设备）、screen（屏幕设备）、print（打印设备）等。
media-feature：媒体特性，用于根据设备的特征进行条件匹配。常用的特性有：
- width：屏幕宽度。
- height：屏幕高度。
- min-width：最小屏幕宽度。
- max-width：最大屏幕宽度。
- orientation：设备方向（portrait表示纵向，landscape表示横向）。
- resolution：屏幕分辨率。
- aspect-ratio：屏幕宽高比例。

媒体查询的规则是逐条解析的，如果多个规则同时满足条件，则会应用最后一个匹配的规则。可以使用逻辑运算符如and、or和not来组合多个媒体特性。

例子：

假设我们屏幕宽度小于767px则是使用手机端的CSS那么我们可以这样写：

/* 手机端样式 */
        @media only screen and (max-width: 767px) {
            /* 手机端特定样式 */
            p {
                color: red;
            }
        }

那么我们手机端看见的这个p标签就是红色。

然后接着小于1023px但是大于768px的为iPad端那么我们可以这样写：

/* iPad端样式 */
        @media only screen and (min-width: 768px) and (max-width: 1023px) {
            /* iPad端特定样式 */
            p {
                color: yellow;
            }
        }

那么我们iPad端看到的p标签就是黄色。

最后大于1024的为PC端我们可以这样写：

/* PC端样式 */
        @media only screen and (min-width: 1024px) {
            /* PC端特定样式 */
            p {
                color: blue;
            }
        }

那么我们PC端看到的p标签就是蓝色。