媒体查询@media

最新推荐文章于 2023-12-21 18:15:29 发布

少睡点觉

最新推荐文章于 2023-12-21 18:15:29 发布

阅读量54

点赞数

分类专栏： JavaScript 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_46691281/article/details/120716313

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

媒体查询`@media`

使用方式

@media screen and (min-device-width: 200px) and (max-device-width: 300px){
            #box {
                background-color: aqua;
            }
        }

常用参数

属性名称	作用
width/height	浏览器的宽度和高度
device-width/device-height	设备屏幕的高度和宽度（主要用于移动设备）

小案例: 但屏幕大小改变是，每行显示的div元素也随着改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>小案列</title>
    <style>
        #box {
            width: 100%;
            height: 500px;
            border: 1px solid darkblue;
        }
        #box div {
            float: left;
            height: 200px;
        }
        #box div:nth-child(1) {
            background-color: aqua;
        }
        #box div:nth-child(2) {
            background-color: rosybrown;
        }
        #box div:nth-child(3) {
            background-color: yellowgreen;
        }

        @media screen and (min-width: 501px){
            #box div {
                width: 33.3%;
            }
        }
        @media screen and (min-width: 400px) and (max-width: 500px){
            #box div {
                width: 33.3%;
            }
        }
        @media screen and (min-width: 200px) and (max-width: 399px){
            #box div {
                width: 50%;
            }
        }
        @media screen and (min-width: 100px) and (max-width: 199px){
            #box div {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!--当屏幕大是显示三个，小一点显示两个，最小是显示一个-->
    <div id="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
</html>

引入方式

第一种

`<style media="screen and (min-width:300px) and (max-width: 500px)">
        #box {
            background-color: yellowgreen;
        }
    </style>
    <style media="screen and (min-width:501px) and (max-width: 800px)">
        #box {
            background-color: rosybrown;
        }
    </style>`

第二种: 通过引入外部样式表

    <link rel="stylesheet" href="css/style1.css" media="screen and (min-width:801px) and (max-width: 1000px)">
    <link rel="stylesheet" href="css/style2.css" media="screen and (min-width:1001px) and (max-width: 1200px)">

少睡点觉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
媒体查询@media

媒体查询@media使用方式@media screen and (min-device-width: 200px) and (max-device-width: 300px){ #box { background-color: aqua; } }常用参数属性名称作用width/height浏览器的宽度和高度device-width/device-height设备屏幕
复制链接

扫一扫