利用media query写响应式布局

最新推荐文章于 2023-03-31 09:35:03 发布

「已注销」

最新推荐文章于 2023-03-31 09:35:03 发布

阅读量106

点赞数

分类专栏：前端文章标签： css 布局

原文链接：https://www.mk2048.com/blog/blog.php?id=hii11cca2a1j&title=%E5%88%A9%E7%94%A8media+query%E5%86%99%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80

版权

前端专栏收录该内容

1143 篇文章 3 订阅

订阅专栏

最近才接触到响应式布局的概念，之前用到的bootstrap就是一种响应式布局的框架。学习的时候参考了http://blog.csdn.net/shoyer/article/details/8293011这篇文章。

简单记录一下用css写响应式布局的方法。大概可以这么理解，通过判断屏幕的大小来调整css的样式从而达到适应不同屏幕的目的。

首先先贴一个html，css都放在同级的css文件夹下面，因为有个简单的轮播，所以要引入jquery

<!DOCTYPE html>
<html>
    <head> 
    <link rel="stylesheet" type="text/css" href="./css/initstyle.css">
    <link rel="stylesheet" type="text/css" href="./css/media-requeries.css">
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <div id="pagewhole">
            <header>    
                <h1>my website</h1>
                <div id="banner">
                    <ul id="banner_img">
                            <li><img src="./img/1.jpg"/></li>
                            <li><img src="./img/2.jpg"/></li>
                            <li><img src="./img/3.jpg"/></li>
                            <li><img src="./img/4.jpg"/></li>
                    </ul>
                </div>
                <nav>   
                    <ul id="main-nav">   
                        <li><a href="#">Home</a></li>   
                        <li><a href="#">Home</a></li>   
                        <li><a href="#">Home</a></li>   
                    </ul>   
                    <form style="float:right;">
                        <input type="text" name="search" />
                        <input type="button" name="submit" value="search" />
                    </form>
                </nav>     
                <div id="clear" style="clear:both;"></div>
            </header>
            <div id="content">
                <article>
                    blog post
                </article>
            </div>
            <aside id="sidebar">
                <section class="widget">   
                     widget   
                </section>  
            </aside>
            <footer id="footer">
                foot
            </footer>
        </div>
    </body>
    <script type="text/javascript">
     var time = "";
         var index = 2;
          setInterval(showimg,3000);
         function showimg() {
             //$(".imgnum span").removeClass("onselect").eq(index-1).addClass("onselect");
             var curli = $("#banner_img li") ;
             curli.fadeOut("slow") ;
             curli.eq(index-1).fadeIn("slow");
             index = index   1 > 4 ? 1 : index   1;
            // time = setTimeout("showimg("   index   ")", 3000);
         }   
    </script>
</html>

注意两个外部css引入的先后顺序很重要，如果弄反了会导致css冲突
然后上我随便写的css样式：

        *{
            padding: 0px ;
            margin: 0px ;
        }
        header{
            margin-top: 20px ;
            margin-bottom: 20px ;
        }
        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    
            display: block;   
        }
        #pagewhole{
            margin: 0 auto ;
            max-width: 960px ;
        }
        #banner{
            overflow: hidden;
            height: 200px;
            border-radius: 10px;
        }
        #content {   
            width: 600px;   
            height: 600px ;
            float: left;   
            border:3px solid #B6B6B6 ;
        }   
        #sidebar {   
            width: 280px;   
            height: 300px ;
            float: right;   
            border:3px solid #B6B6B6 ;
        }   
            
        #footer {   
            clear: both;   
            height: 20px ;
        } 
        #main-nav li{
            float: left;
            list-style-type:none;
            display: block;
            width: 50px;
        }
        #banner li{
            float: left;
        }

media-queries.css

@media screen and (max-width: 960px){
    #pagewhole{
        width: 95% ;
    }
    #content{
        width: 60% ;
        padding: 3% 4% ;
    }
    #sidebar{
        width: 30% ;    
    }
}
@media screen and (max-width: 650px){
    header{
        height: auto ;
    }
    #content{
        width: auto;
        float: none;
        margin: 20px 0 ;
    }
    #sidebar{
        width: 100% ;
        float: none;
        margin: 0 ;
    }
}
@media screen and (max-width: 480px) {   
    
    html {   
        -webkit-text-size-adjust: none;   
    }   
    
    #main-nav a {   
        font-size: 90%;   
        padding: 10px 8px;   
    }   
    
}

这个css是关键，就是靠他来判断浏览器的宽度变换的，你问我为啥选那几个宽度？960px是因为一般网页内容都是960px，480px是因为iphone的宽度是480px，中间的那个不懂。。

这是一些响应式可能需要的meta

http://www.uisdc.com/mobile-phone-terminal-meta

响应式网站得记住几点（我的师傅说哒）
如果不是100%宽度的网站定义父框架的 div  必须要带max-width 跟 width
所有的网页图片要切成2倍大小，即如果psd里100*100的图片   要切成200*200的
在手机端就算是你写了 display:none  dom元素中的css 手机还是会加载如果css 里你设置了一张大的背景图片   手机还是会加载这张图片这时候就需要jq   removed() 来移除 div

更多专业前端知识，请上【猿2048】www.mk2048.com