针对不同设备的 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;
}

工作小提琴的链接是：http://jsfiddle.net/FVLMX/324/ 它如何在带有媒体查询或视口的移动设备/i-phone/平板电脑中工作。

需要进行哪些基本更改？

Answer 1

适用于智能手机

@media only screen and (min-width:320px) and (max-width:480px) {|
}

对于标签

@media only screen and (min-width:768px) and (max-width:1024px) {
}

看看这个工具。 http://www.responsinator.com/ 对响应式开发非常有帮助。否则，如果您使用的是 Mozilla Firefox，请按 Shift+Ctrl+M 。这将为您提供用于响应式 Web 开发的各种屏幕尺寸。

祝你好运

Answer 2

用户

@media (min-resolution: 480px) {

}

对于物理上的小型设备、物理上的大型设备和中型设备，请查看

Responsive Web Design With Physical Units

Recommended widths for responsive layouts