css media 媒体查询器案例

最新推荐文章于 2022-10-06 11:31:00 发布

麻瓜小姐姐

最新推荐文章于 2022-10-06 11:31:00 发布

阅读量934

点赞数 2

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_37994886/article/details/94966400

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

响应式布局简单理解就是为了适应不同尺寸屏幕，其核心技术为css的mediaMedia(媒体查询器)的用法。

步骤

1.定义meta标签，主要意思是来兼容移动设备的效果

  <meta name="view" content="width = device-width,initial-sacle=1">

参数解释：

width = device-width：宽度等于当前设备的宽度

initial-sacle=1：初始的缩放比例为1(默认是1)

2.写div标签

<body>
<div class="heading"></div>
<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>
<div class="footing"></div>
</body>

3.定义新的css文件，导入css文件

<link href="style.css" type="text/css" rel="stylesheet">

以下为设置初始样式

*{
    margin: 0px;
    padding: 0px;
}
.heading,.container,.footing{
    margin: 10px auto;
}
.heading{
    height: 100px;
    background-color: cadetblue;
}
.left,.right,.main{
    background-color: red;
}
.footing{
    height: 100px;
    background-color: blue;
}

设置宽度大于960px的页面布局

@media screen  and (min-width: 960px){
    .heading,.container,.footing{
        width:960px;
    }
    .left,.main,.right{
      float: left;
        height: 500px;
    }
    .left,.right{
        width: 200px;
    }
    .main{
       margin-left: 5px;
        margin-right: 5px;
        width: 550px;
    }
    .container{
        height: 500px;
    }

}

设置处于600px-900px之间的页面布局

@media screen and (min-width: 600px) and (max-width:960px){
    .heading,.container,.footing{
        width: 600px;
    }
    .left,.main{
        float: left;
        height: 400px;
    }
    .right{
        display: none;
    }
    .left{
        width: 160px;
    }
    .main{
        width: 435px;
        margin-left: 5px;
    }
    .container{
        height: 400px;
    }

}

设置小于600px的页面布局

@media screen and (max-width: 600px) {
    .heading,.container.footing{
        width: 400px;
    }
    .left,.right{
        width: 400px;
        height: 100px;
    }
    .main{
        margin-top: 10px;
        width: 400px;
        height: 200px;
    }
    .right{
        margin-top: 10px;
    }
    .container{
        height: 400px;
    }

}

打开浏览器进行缩放，当页面宽度大于960px时我布局如下：

处于600-960之间的布局

宽度小于600px的布局

注意的点：

@media screen and (min-width: 600px) and (max-width:960px)引入这个的时候记得括号前后都要空格，不然发现没效果

麻瓜小姐姐

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录