css - 使用 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%;}