2020-11-24媒体查询

最新推荐文章于 2024-07-16 14:59:55 发布

鱼皮怪

最新推荐文章于 2024-07-16 14:59:55 发布

阅读量177

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_44630056/article/details/110096560

版权

                                                                          ***响应式布局之媒体查询***

1：什么是响应式布局？
答：响应式布局指的是在同一个页面适合不同尺寸的屏幕然后拥有不同的布局，而传统的开发是移动端一套，pc端一套。

2：响应式布局的实现方案-------媒体查询
答： css3 Media Query(媒体查询) @media 可以根据不同的屏幕尺寸设置不同的样式，页面布局分别适应于 pc 端，移动端等，在调整浏览器的大小时,页面会根据媒体查询的宽度和高度来重新布置样式。
媒体查询可以用于自动检测很多东西：自动检测viewport(视图窗口)的宽度；设备的宽度：旋转方向（智能手机横屏或者竖屏）；分辨率大小。

3：css3语法的规则
a:如何理解@media 的语法规则：
1：使用媒体查询必须以 @media 开头
2：然后指定设备类型（媒体查询类型 mediatype）；
3：接着是括号（）里面是规定媒体/设置特征（media feature),媒体特征的书写格式与css样式类似，都是属性名：属性值（列如：max- width:500px）;
4:最后跟着的是大括号{css-code}，里面放的是设置的 css样式。

4：逻辑运算符
not 用来排除某种设备/和当前条件取反
列如：排除打印设备 @media not print;
条件取反： @meda not and (max-width:500px);
and 媒体查询中使用来连接多种媒体特性
“ ， ” 媒体查询中使用来连接多种媒体特性
all 适用于打印所有的设备类型
print : 使用与打印机和打印预览
screen :适用于电脑屏幕平板电脑智能手机等。
speech ：适用于屏幕阅读器

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Query</title>
    <style>
        section{
            font-size: 1cm;
        }
        section::after{
            content: "";
            font-size: 2cm;
            color: red;
        }
        /* 
        @media：媒体查询，可以针对不同的媒体类型定义不同的样式。
        screen：表示电脑，平板，智能手机显示屏，包括有关客户端显示屏的信息。
        在HTML文件中不能直接使用 > 和 < 符号
            min- 相当于大于等于即 >=
            max- 相当于小于等于即 <=
        操作符:可以用来构建复杂的媒体查询。
            and：所有的条件都成立的时候，才能使用样式表。
            ,   :有一个条件成立，就可以使用样式表。
            not：否定条件，用来对媒体查询条件进行取反。
         */
        @media screen and (min-width: 600px) and (max-width:800px){
            section::after{
                content: "------我在600-800之间";
            }
        }
        @media not screen and (max-width: 500px){
            section::after{
                content: "----------大于500啦";
            }
        }
        /* orientation：用来判断设备是横屏还是竖屏。
            portrait：竖屏。
            landscape：横屏。
         */
        @media screen and (orientation:portrait){
            section::after{
                content: "=======当前是竖屏";
            }
        }
        @media screen and (orientation:landscape){
            section::after{`在这里插入代码片`
                content: "=======当前是横屏";
            }
        }
    </style>
</head>
<body>
    <section>媒体查询：</section>
</body>

``` ```

加油陌生人 ----鱼皮怪