使用CSS为移动设备调整div的大小

Question

是否可以仅使用CSS为移动设备调整div大小？如果有的话，请有人给我看一个工作实例，这样我就可以自己弄清楚如何做到这一点？

谢谢

Answer 1

您可以使用下面的媒体查询来获取特定设备，如手机，标签等 以下只是示例

<强> CSS

.cont {float:left;width :400px;background-color:#000;}
.cont .left {float:left;width :200px;}
.cont .right {float:left;width :200px;}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */

.cont {width :200px; background-color:#666666 !important;}
.cont .left {width :100px !important;}
.cont .right {width :100px !important;}

}

<强> HTML

<div class="cont">
    <div class="left">
        left content
    </div>
    <div class="right">
        right content 
    </div> 
</div>

否则，您可以将div的宽度设置为百分比而不是像素，即

.cont {float:left;width :100%;background-color:#000;}
.cont .left {float:left;width :50%;}
.cont .right {float:left;width :50%;}