• 媒体查询？

    媒体查询（Media Query）是CSS3新语法 。

    使用@media查询，可以针对不同的媒体类型定义不同的样式

    @media 可以针对不同的屏幕尺寸设置不同的样式

    当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

    目前针对很多苹果手机，Android手机，平板等设备都得到多媒体查询

    语法规范：

    @media mediatype and | not | only (media feature) {

           CSS-Code;

    }

    1.用@media开头 注意@符号

    2.media type 媒体类型

     

    3.关键字 and not only

    4.media feature 媒体特性 必须有小括号包含

       

    例如下面案例，根据页面宽度改变背景颜色

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         @media screen and (max-width:539px){
    10.             body{ 
    11.                 background-color: blue;
    12.             }
    13.         }
    14.         @media screen and (min-width:540px) and (max-width:969px){ 
    15.             body{ 
    16.                 background-color: green;
    17.             }
    18.         }
    19.         @media screen and (min-width:970px){
    20.             body{ 
    21.                 background-color: red;
    22.             }
    23.         }
    24.     </style>
    25. </head>
    26. <body>
    27.     
    28. </body>
    29. </html>

     浏览器在宽度小于540px的时候，背景颜色是蓝色，浏览器宽度在540px-970px之间，body的背景颜色是绿色，浏览器宽度大于970px的时候，背景颜色是红色。

    媒体查询可以根据不同的屏幕尺寸改变不同的样式。

    媒体查询+rem实现动态大小变化

    rem单位是跟着html来走的，有了rem页面元素可以设置不同的大小尺寸

    媒体查询可以根据不同设备宽度来修改样式

    媒体查询+rem就可以实现不同设备宽度，实现元素大小的动态变化

    案例：媒体查询+rem实现元素变化

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10. <style>
    11.   @media screen and (min-width:320px){
    12.     html {
    13.         font-size: 50px;
    14.     }
    15.   }
    16.   @media screen and (min-width:640px){
    17.     html {
    18.         font-size: 100px;
    19.     }
    20.   }
    21.  
    22.     .top {
    23.         text-align: center;
    24.         line-height: 1rem;
    25.         height: 1rem;
    26.         font-size: .5rem;
    27.         background-color: green;
    28.         color: #fff;
    29.     }
    30. </style>
    31.  
    32. <body>
    33.     <div class="top">购物车</div>
    34. </body>
    35.  
    36. </html>

    当屏幕缩小跟放大时，它的高度跟宽度也会发生变化。

  • 相关阅读:
    【LeetCode-简单题】225. 用队列实现栈
    【面试题】写一个脚本统计一个文本文件的行数
    [最新]访问/加速StackOverFlow的方法
    【操作系统】（三）内核
    lua 元表和面向对象
    计算机网络基础
    C++之多态以及文件处理
    Linux基本指令
    Ubuntu修改下载源
    linux 网络 sk_buff结构
  • 原文地址：https://blog.csdn.net/weixin_65607135/article/details/126854341