CSS3 @media 查询（制作响应式布局）

 这里简单说明一下@media 查询。

详细说明文档：http://www.runoob.com/cssref/css3-pr-mediaquery.html

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

屏幕缩小：

屏幕放大：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>响应式</title>
            
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                font-size:60px;
                color: white;
            }
            
            #conter{
                width: 100%;
                clear: both;
                overflow: hidden;
            }
            
            header{
                padding-top: 10px;
                padding-bottom: 70px;
            }
            
            #one{
                width: 75%;
                height: 35px;
                background: black;
                float: left;
            }
            
            #one1{
                width: 20%;
                height: 35px;
                background: black;
                float: right;
            }
            
            #two{
                background: lightseagreen;
                width: 100%;
                height:120px;
                clear: both;
                text-align: center;
                
                line-height: 120px;                
            }
            #lm{
                width: 100%;
            }
            
              [class*=g1] {
                      float:left;
                     margin-right: 1%;
                    width: 24%;
                    height: 200px;
                    margin-top: 30px;
                    line-height: 200px;
                    text-align: center;
                    
                    background: sandybrown;
                }
                
                #yi{
                    overflow: auto;
                    margin-right: -1%;
                }
               
               @media only screen and (min-width: 480px) and (max-width: 980px) {
                       header{
                           width: 100%;
                       }
               }
               
              @media only screen and (max-width: 480px) {
                [class^=g1] {
                    float: none;
                    width: 100%;
                }
            }
               
              @media only screen and (min-width: 768px) and (max-width: 1024px) {
                       [class^=g1] {           
                            width: 49%;
                    }
               }
               
        </style>
    </head>
    <body>
        <div id="conter">
            <header>
                <div id="one">    
                </div>
                
                <div id="one1">    
                </div>
            </header>
            <div id="two">
                1
            </div>
            
            <div id="lm">
                <div id="yi">
                    <div class="g1" style="background:lightgreen;">2</div>
                    <div class="g1" style="background: lightcoral;">3</div>
                    <div class="g1" style="background: deepskyblue">4</div>
                    <div class="g1" style="background: pink;">5</div>
                </div>
            </div>
        </div>
    </body>
</html>
View Code

不同大小分辨率就不同效果，bootstrap框架里面的CSS里面样式，里面也用到了@media查询。感觉CSS3好强大。

菜鸟一枚，欢迎大神指点，只有不断深入学习，才能够收获

posted @ 2018-07-19 16:13  简称LCH  阅读(610)  评论(0)  编辑  收藏  举报