media query语法和响应式布局

最新推荐文章于 2023-08-16 16:24:16 发布

波杰克码难

最新推荐文章于 2023-08-16 16:24:16 发布

阅读量262

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_43734147/article/details/104163397

版权

media query语法和响应式布局

media query 语法

media query 的语法稍微有点复杂，语法格式如下：

@media not|only 设备类型[and 设备特性] *

在上面语法格式中， [ and 设备特性 ] 部分可以出现 O~N 次，通过使用多个[and 设备特性］可以对多个设备特性进行匹配。
media query 语法格式中的设备类型如表所示。

实际上一般使用时，设备类填写 screen, 管是电脑屏幕是手机、平板电脑屏幕都对应于 screen 设备
media query 语法格式中的设备特性如表所示。

响应式布局

如果是手机响应式布局时必须在head中加下面这行代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

下面定义了一个栏布局的页面页面在宽度大于1000px的浏览器中显示时，3个栏目会并排显示；在宽度小于 480px 的浏览器中显示时，3个栏目会垂直排列显示。因此，页面需要对这种浏览器宽度分别定义不同的CSS 样式。页面代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #container{
        margin: auto;
        width: 750px;
    }
    #container>div{
        border: 1px solid red;
        text-align: left;
        box-sizing: border-box;
        border-radius: 12px;
        padding: 4px;
    }
    div#left{
        width: 300px;
        height: 260px;
        float: left;
    }
    div#main{
        width: 450px;
        height: 260px;
        float: left;
        /* 清除右边的浮动 */
        clear: right;
    }
    div#right{
        width: 750px;
        float: left;
    }
    /* 浏览器宽度大于1000px的样式 */
    @media screen and (min-width:1000px){
        #container{
            margin: auto;
            width: 960px;
        }
        #container>div{
            border: 1px solid red;
            text-align: left;
            box-sizing: border-box;
            border-radius: 12px;
            padding: 4px;
        }
        div#left{
            width: 240px;
            height: 260px;
            float: left;
        }
        div#main{
            width: 460px;
            height: 260px;
            float: left;
            /* 让左右两边都可以出现float元素 */
            clear: none;
        }
        div#right{
            width: 260px;
            float: left;
            height: 260px;
        }
    }
     /* 浏览器宽度小于480px的样式 */
    @media screen and (max-width:480px){
        #container{
            margin: auto;
            width: 450px;
        }
        #container>div{
            border: 1px solid red;
            text-align: left;
            box-sizing: border-box;
            border-radius: 12px;
            padding: 4px;
        }
        div#left{
            width: 450px;
            height: 150px;
            float: left;
        }
        div#main{
            width: 450px;
            height: 260px;
            float: left;
            /* 让左右两边都不可以出现float元素 */
            clear: both;
        }
        div#right{
            width: 450px;
            float: left;
            height: 170px;
        }        
    }
</style>
<body>
    <div id="container"> 
        <div id="left">
            <h2>cccccc</h2> 
            . . ． 省略页面内容 
        </div>
        <div id="main">
             <h2>cccccccccccccc</h2>
              ．．． 省略页而内容 
        </div> 
        <div id="right">
            <h2>cccccccccc</h2>
             ．．．省略页面内容
        </div>
    </div> 
</body>
</html>

在这里插入图片描述
px 宽度小于

波杰克码难

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
media query语法和响应式布局

media query语法和响应式布局media query 语法media query 的语法稍微有点复杂，语法格式如下：@media not|only 设备类型[and 设备特性] * 在上面语法格式中， [ and 设备特性 ] 部分可以出现 O~N 次，通过使用多个[and 设备特性］可以对多个设备特性进行匹配。media query 语法格式中的设备类型如表所示。实际上...
复制链接

扫一扫