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 (min-resolution: 480px) {

}

对于物理上较小的设备，物理上大型设备和中型设备可以看看

Responsive Web Design With Physical Units

Recommended widths for responsive layouts

Answer 2

智能手机

@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开发。

祝你好运

针对不同设备的CSS Media查询

2 个答案: