Media Query的基本概念

说到WordPress的主题，少不了提到那个叫Media Query的东东，就是控制Viewport大小的。如果屏幕小于980px，网站就会变成手机适用，手机上也可以自定义宽度，好有趣！降到650px以下的话，那就是手机网页版咯，内容和侧边栏都会占满全屏的样子，跟平时在网上看到的手机版差不多。

    

        

            
Demo
            
Site Description
        
        
        
            
        
    
    
    

        

            blog post        
    

    
    
    
    

咱们随便看看重要的部分，比如”pagewrap”里都有哪些元素？喏，这里面有封面大哥–“header”，文章内容部位–“content”，边栏–“sidebar”，还有底部标志–“footer”。别忘了，老版本的IE浏览器（尽量保持在IE9以前哦）可能会搞不定HTML5的新标签字符。小心点儿哈～

解决IE兼容性问题

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

要不就是你不太爱用IE浏览器咯。别急，我来给你支个招儿！你得在HTML文件里添加一段名叫html5.js的代码，这样IE老古董也能看懂新标签了。然后，把CSS代码调一调，像是article啊、aside这些html5标签，都设为块级元素，就完事儿！

#pagewrap {
    width: 980px;
    margin: 0 auto;
}#header {
    height: 160px;
}#content {
    width: 600px;
    float: left;
}#sidebar {
    width: 280px;
    float: right;
}#footer {
    clear: both;
}

别着急换浏览器！IE 8及其之前版本的可能不太懂CSS3媒体查询。怎么办？很简单，在你的网站上加个“css3-mediaqueries.js”文件就好了。

处理浏览器兼容性问题

IE7还挺靠谱的，但我用IE8就是各种尴尬。然而通过改调CSS加点儿width:auto和’this”就能解决问题啦～但是Safari那货在读取max-width:100%时就会卡住，真是让人心烦！

@media screen and (max-width: 980px) {
    #pagewrap {
        width: 95%;
    }
    #content {
        width: 60%;
        padding: 3% 4%;
    }
    #sidebar {
        width: 30%;
    }
    #sidebar .widget {
        padding: 8% 7%;
        margin-bottom: 10px;
    }}

注意！iPhone上的Safari浏览器可以让网页变小图，但要看大图的话要记牢几个关键字和一句话哦：

@media screen and (max-width: 650px) {
    #header {
        height: auto;
    }
    #searchform {
        position: absolute;
        top: 5px;
        right: 0;
    }
    #main-nav {
        position: static;
    }
    #site-logo {
        margin: 15px 100px 5px 0;
        position: static;
    }
    #site-description {
        margin: 0 0 15px;
        position: static;
    }
    #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;
    }}

提醒你一句，多学点技巧就能更快上手自适应设计了。就像打游戏那样，随心所欲地调整viewport大小，搞定CSS布局并不难！记得用宽度:100%和高度:自动这两个秘诀让你的视频看起来焕然一新。

开开心心玩的时候，记得在Meta标签里设好Viewport和初始缩放