CSS3系列四（Media Queries移动设备样式）

系统管理员 2022-04-10 09:56 197阅读 0赞

#### viewport设置适应移动设备屏幕大小 ####

viewport：允许开发者创建一个虚拟窗口并自定义其窗口的大小或缩放功能

代码中的content属性可以设置如下6种不同参数

![271710258776523.jpg][]

#### Media Queries如何工作 ####

1、定义当前屏幕可视区域的宽度最大值是600像素

那么small.css怎样写的呢

@media screen and (max-width:600px) {
        
        .demo {
            background-color:red;
        }
    }

2、定义当前屏幕可视区域的宽度长度在600到900像素之间

@media screen and (min-width:600px) and (max-width:900px) {
        
        .demo {
            background-color: red;
        }
    }

3、当移动屏幕处于纵向（portrait）模式下时，应用portrait样式文件，当移动设备处于横向（landscape）模式下，应用landscape样式文件

#### Media Queries语法总结 ####

语法格式如下图所示：

![271723362208233.jpg][]

1、使用Media Queries样式模块时都必须以“@media”方式开头

2、media\_query表示查询关键定，比如说not only and 等等

*  　　not表示对后面的样式表达式执行取反操作
 *  　　only让不支持Media Queries的设备但能读取Media Type类型的浏览器忽略这个样式，对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的浏览器会忽略only关键字并直接根据页面的表达式应用样式 文件

3、media\_type 指定设备类型（也称媒体类型）

4、media\_feature定义css中的设备特征

#### media\_type设备类型一览表 ####

![271732011271017.jpg][]

#### media\_feature设备特征一览表 ####

**大部分设备特征都允许接受min/max的前缀**

![271733418456712.jpg][]

![271733455334053.jpg][]

[271710258776523.jpg]: /images/20220331/166e1357b751483fbb37137409e4856e.png
[271723362208233.jpg]: /images/20220331/1ade7756f5714bf195784598d90733cb.png
[271732011271017.jpg]: /images/20220331/d54d79f2f8234875a5289532031815eb.png
[271733418456712.jpg]: /images/20220331/0b666981bdf34abea3aa7d96bd454852.png
[271733455334053.jpg]: /images/20220331/88ef9ce129d8456dab7b7a7e9db2e42a.png