zoukankan      html  css  js  c++  java
  • 0080 媒体查询media、引入资源

    什么是媒体查询

    媒体查询(Media Query)是CSS3新语法。

    • 使用 @media查询,可以针对不同的媒体类型定义不同的样式
    • @media 可以针对不同的屏幕尺寸设置不同的样式
    • 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
    • 目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询

    媒体查询语法规范

    • 用 @media开头,注意@符号
    • mediatype : 媒体类型
    • 关键字: and 、not、only
    • media feature : 媒体特性必须有小括号包含
    @media mediatype and|not|only (media feature) {
        CSS-Code;
    }
    
    1.mediatype 查询类型

    ​ 将不同的终端设备划分成不同的类型,称为媒体类型

    在这里插入图片描述


    2.关键字

    ​ 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

    • and:可以将多个媒体特性连接到一起,相当于“且”的意思。
    • not:排除某个媒体类型,相当于“非”的意思,可以省略。
    • only:指定某个特定的媒体类型,可以省略。

    3.媒体特性

    每种媒体类型都具有各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。

    注意他们要加小括号包含。

    在这里插入图片描述

    (1)媒体查询书写规则

    注意: 为了防止混乱,媒体查询,我们要按照从小到大或者从大到小的顺序来写,,但是我们最喜欢的还是从小到大来写,这样代码更简洁。
    在这里插入图片描述

    demo:媒体查询案例修改背景颜色
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
            /* 2. 小于540px 页面的背景颜色变为蓝色 */
            
            @media screen and (max- 539px) {
                body {
                    background-color: blue;
                }
            }
            /* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
            /* @media screen and (min- 540px) and (max- 969px) {
                body {
                    background-color: green;
                }
            } */
            
            @media screen and (min- 540px) {
                body {
                    background-color: green;
                }
            }
            /* 4. 大于等于970 我们页面的颜色改为 红色 */
            
            @media screen and (min- 970px) {
                body {
                    background-color: red;
                }
            }
            /* 5. screen 还有 and 必须带上不能省略的 */
            /* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略的 */
        </style>
    </head>
    
    <body>
    
    </body>
    
    </html>
    

    demo:媒体查询+rem实现元素动态变化.
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            /* html {
                font-size: 100px;
            } */
            /* 从小到大的顺序 */
            
            @media screen and (min- 320px) {
                html {
                    font-size: 50px;
                }
            }
            
            @media screen and (min- 640px) {
                html {
                    font-size: 100px;
                }
            }
            
            .top {
                height: 1rem;
                font-size: .5rem;
                background-color: green;
                color: #fff;
                text-align: center;
                line-height: 1rem;
            }
        </style>
    </head>
    
    <body>
        <div class="top">购物车</div>
    </body>
    
    </html>
    

    在这里插入图片描述

    4.引入资源(理解)

    当样式比较繁多的时候,我们可以针对不同的媒体使用不同 stylesheets(样式表)。 原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。

    (1)语法规范
    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
    
    (2)示例
    <link rel="stylesheet" href="styleA.css" media="screen and (min- 400px)">
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            /* 当我们屏幕大于等于 640px以上的,我们让div 一行显示2个 */
            /* 当我们屏幕小于640 我们让div一行显示一个 */
            /* 一个建议: 我们媒体查询最好的方法是从小到大 */
            /* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */
        </style>
        <link rel="stylesheet" href="style320.css" media="screen and (min- 320px)">
        <link rel="stylesheet" href="style640.css" media="screen and (min- 640px)">
    </head>
    
    <body>
        <div>1</div>
        <div>2</div>
    </body>
    
    </html>
    
    style320.css
    div {
         100%;
        height: 200px;
    }
    
    div:nth-child(1) {
        background-color: pink;
    }
    
    div:nth-child(2) {
        background-color: seagreen;
    }
    
    style640.css
    div {
        float: left;
         50%;
        height: 200px;
    }
    
    div:nth-child(1) {
        background-color: #ccc;
    }
    
    div:nth-child(2) {
        background-color: #0ff;
    }
    

    在这里插入图片描述

  • 相关阅读:
    第一节,Django+Xadmin打造上线标准的在线教育平台—创建用户app,在models.py文件生成3张表,用户表、验证码表、轮播图表
    Tensorflow 错误:Unknown command line flag 'f'
    Python 多线程总结
    Git 强制拉取覆盖本地所有文件
    Hive常用函数 傻瓜学习笔记 附完整示例
    Linux 删除指定大小(范围)的文件
    Python 操作 HBase —— Trift Trift2 Happybase 安装使用
    梯度消失 梯度爆炸 梯度偏置 梯度饱和 梯度死亡 文献收藏
    Embedding 文献收藏
    深度学习在CTR预估中的应用 文献收藏
  • 原文地址:https://www.cnblogs.com/jianjie/p/12127301.html
Copyright © 2011-2022 走看看