针对不同设备的 CSS 媒体查询

Question

我有一些基本的 CSS 2 列布局。它适用于桌面浏览器调整大小，因为它是液体布局。

这是我的代码:

HTML:

  <div id="wrapper">
        <div id="headerwrap">
        <div id="header">
            <p>Header Part</p>
        </div>
        </div>
        <div id="contentliquid"><div id="contentwrap">
        <div id="content">
            <p>This is the Body/content Part</p>
            <div class="test">
            </div>

            <div class="test">
            </div>

            <div class="test">
            </div>

            <div class="test">
            </div>

            <div class="test">
            </div>

            <div class="test">
            </div>

            <div class="test">
            </div>

        </div>
        </div></div>
        <div id="leftcolumnwrap">
        <div id="leftcolumn">
            <p>This is the Left Column</p>

        </div>
        </div>
        <div id="footerwrap">
        <div id="footer">
            <p>@copyright xyz Corporation</p>

        </div>
        </div>
    </div>   

CSS:

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    color:#333
}

p {
    padding: 10px;
}


#wrapper {
    width: 100%;
    min-width: 1000px;
    max-width: 2000px;
    margin: 0 auto;
}

#headerwrap {
    width: 100%;
    float: left;
    margin: 0 auto;
}

#header {
    height: 75px;
    background: silver;
    border-radius: 10px;
    border: 1px solid black;
    margin: 5px;
}

#contentliquid {
    float: left;
    width: 100%;
}

#contentwrap {
    margin-left: 250px;
    float: left;
}

#content {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid black;
    margin: 5px;
}

#leftcolumnwrap {
    width: 250px;
    margin-left: -100%;
    float: left;
}

#leftcolumn {
    background: silver;
    border-radius: 10px;
    border: 1px solid black;
    margin: 5px;
}

#footerwrap {
    width: 100%;
    float: left;
    margin: 0 auto;
    clear: both;
}

#footer {
    height: 40px;
    background: silver;
    border-radius: 10px;
    border: 1px solid black;
    margin: 5px;
}

.test{

height:200px;
width:200px;
border: 1px solid black;
margin-left: 5px;
margin-top: 10px;
display : inline-block;
}

工作 fiddle 的链接是:http://jsfiddle.net/FVLMX/324/它如何在具有媒体查询或视口(viewport)的移动设备/i-phone/平板电脑中工作。

需要进行哪些基本更改？

Answer 1

用户

@media (min-resolution: 480px) {

}

对于物理尺寸较小的设备、尺寸较大的设备和中等尺寸的设备，请查看

Responsive Web Design With Physical Units

Recommended widths for responsive layouts