mediaquery 媒体查询

style内部使用媒体查询
link使用媒体查询

style内部使用媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- width=device-width：设置视口的宽度为设备的宽度，这样网页内容能够适应不同大小的屏幕   -->
     <!--    initial-scale=1.0：设置初始缩放比例为1，确保网页在加载时不进行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        #div0 {
            width: 500px;
            height: 200px;
            background: #3c9;
            margin: 0 auto;
        }
        #div0 div {
            width: 100%;
            height: 50px;
            float: left;
        }

        #div0 div:nth-child(1) {
            background-color: #927;
        }

        #div0 div:nth-child(2) {
            background-color: #972;
        }

        #div0 div:nth-child(3) {
            background-color: #733;
        }
        /*使用媒体查询针对屏幕宽度小于或等于499像素的设备*/
        @media screen and (max-width: 499px) {
            #div0 div {
                width: 100%;
            }
        }

        /*使用媒体查询针对屏幕宽度在501像素到1000像素之间的设备*/
        @media screen and (min-width: 501px) and (max-width: 1000px) {
            #div0 div {
                width: 50%;
            }
        }
        
        /*使用媒体查询针对屏幕宽度大于1001像素的设备*/
        @media screen and (min-width: 1001px) {
            #div0 div {
                width: 33.33%;
            }
        }
    </style>
</head>
<body>
<div id="div0">
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

link使用媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="css/css1.css">
    <link rel="stylesheet" href="css/css2.css">
</head>
<body>
<div id="div0">
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

css文件配置
css1.css

#div0 {
    width: 500px;
    height: 200px;
    background: #3c9;
    margin: 0 auto;
}
#div0 div {
    width: 100%;
    height: 50px;
    float: left;
}

#div0 div:nth-child(1) {
    background-color: #927;
}

#div0 div:nth-child(2) {
    background-color: #972;
}

#div0 div:nth-child(3) {
    background-color: #733;
}

css2.css

/*使用媒体查询针对屏幕宽度小于或等于499像素的设备*/
@media screen and (max-width: 499px) {
    #div0 div {
        width: 100%;
    }
}

/*使用媒体查询针对屏幕宽度在501像素到1000像素之间的设备*/
@media screen and (min-width: 501px) and (max-width: 1000px) {
    #div0 div {
        width: 50%;
    }
}

/*使用媒体查询针对屏幕宽度大于1001像素的设备*/
@media screen and (min-width: 1001px) {
    #div0 div {
        width: 33.33%;
    }
}

posted on 2024-09-24 21:45 anyux 阅读(3) 评论(0) 编辑收藏举报

最新随笔

随笔分类

随笔档案

文章分类

mediaquery 媒体查询

style内部使用媒体查询

link使用媒体查询