Day37媒体查询适配响应式网页

image
image
基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询</title>
    <style>
        /* 屏幕宽度小于等于768时，网页背景是粉色  max-width*/
        @media(max-width:768px){
            body{
                background-color: pink;
            }
        }
        /* 屏幕宽度大于等于1200，网页背景色是绿色 */
        @media(min-width:1200px){
            body{
                background-color: green;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

书写顺序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询的书写顺序</title>
    <style>
        /* 网页的默认背景颜色是粉色 */
        body{
            background-color: #ccc;
        }
        
        /* 屏幕宽度大于等于768时，网页背景是粉色  max-width*/
        @media(min-width:768px){
            body{
                background-color: pink;
            }
        }
        /* 屏幕宽度大于等于992px时，网页背景是绿色 */
        @media(min-width: 992px){
            body{
                background-color: green;
            }
        }
        /* 屏幕宽度大于等于1200时，网页背景色是skyblue */
        @media(min-width:1200px){
            body{
                background-color: green;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>
posted @ 2025-12-22 22:12  冰涿  阅读(2)  评论(0)    收藏  举报