媒体查询常见的媒体尺寸设置

最新推荐文章于 2023-08-26 20:00:39 发布

jijsn

最新推荐文章于 2023-08-26 20:00:39 发布

阅读量6.2k

点赞数 2

文章标签： html servlet 前端

本文链接：https://blog.csdn.net/jijsn/article/details/126372565

版权

媒体查询常见的媒体尺寸设置

通过媒体查询，针对不同的设备的尺寸设置断点来改变布局

屏幕        设备        断点
超小屏幕     手机        <768px
小屏幕       平板        >=768px ~ <992px  
中等屏幕      桌面       >=992px ~ <1200px
大屏幕       桌面        >=1200px       
    
    
常用媒体查询尺寸：
    1200px
    1100px    1000px   1024px
    980px
    768px     720px
    640px
    480px
    375px
    320px
    280px

4、移动设备优先

    移动设备优先：超小屏幕 超小型设备（手机，768px以下）

    小屏幕  768px-992px
    @media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，768px 以上） */

    中等屏幕 992px - 1200px  
    @media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 以上） */
    
    大屏幕  大于1200px
    @media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 以上） */

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*在移动端看 移动端显示的颜色  768px屏幕以下*/
        body {
            background-color: orange;
        }

        /* 小屏幕  768px-992px  屏幕宽度在768px以上显示的颜色*/
        @media screen and (min-width: 768px) {
            body {
                background-color: yellow;
            }
        }

        /* 中等屏幕  992px - 1200px*/
        @media screen and (min-width: 992px) {
            body {
                background-color: tomato;
            }
        }

        /* 大屏幕  大于1200px*/
        @media screen and (min-width: 1200px) {
            body {
                background-color: pink;
            }
        }
    </style>
</head>

<body>

</body>

</html>

5、大屏幕设备优先

   大屏幕设备优先：大屏幕 桌面在1200px以上    大型设备（大台式电脑，1200px 以上）
    中等屏幕 992px-1200px
    @media screen and (max-width:1200px) { ... } /* 中型设备（台式电脑，1200px 以下） */
    小屏幕 768px-992px
    @media screen and (max-width:992px){ ... }/* 小型设备（平板电脑，992px 以下） */
    超小屏幕 768px屏幕以下
    @media screen and (max-width:768px){ ... }/* 超小型设备（手机，768px 以下） */
    或者
   @media screen and (max-width:768px){ ... }/* 超小型设备（手机，767px 以下） */
     /* 注意：此时超小屏幕和小屏幕在768px之间有冲突，怎么解决？
        把超小屏幕的区间降低1px*/

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 屏幕大于1200px显示的颜色 */
        body {
            background-color: green;
        }

        /* 中等屏幕 992px-1200px 屏幕宽度在1200px以下显示的颜色*/
        @media screen and (max-width:1200px) {
            body {
                background-color: tomato;
            }
        }


        /* 小屏幕 768px-992px*/
        @media screen and (max-width:992px) {
            body {
                background-color: pink;
            }
        }
        
     /* 注意：此时超小屏幕和小屏幕在768px之间有冲突，怎么解决？
        把超小屏幕的区间降低1px*/
        
        /* 超小屏幕 768px屏幕以下*/
        @media screen and (max-width:767px) {
            body {
                background-color: orange;
            }
        }
    </style>
</head>

<body>

</body>

</html>