Question

嗨我几乎已经完成了我的网站，但我在移动设备上有一小部分列不显示100％，我不知道我在下面的CSS中做错了但最大宽度为320px在移动设备上似乎并没有使该列达到100％。

这是指向我的网站的链接，了解会发生什么

http://www.ico.mmu.ac.uk/08506125/portfolio/index.html

我知道这是一个非常简单的解决方案......

@media(max-width : 320px){
.column.half { width: 100%;}
 }

/* Column sizes */

@media (min-width: 40rem) 
 .column {
float:left;
padding-left:1em ;
padding-right:1em;
}

.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%;}
.column.third { width: 33.3%; }
.column.fourth { width: 25%; }
.column.flow-opposite { float: right; } 


/* Column sizes end */

/* Medium screens (640px) */
@media (min-width: 40rem) {
html { font-size: 112%; }
.third {  float:left; display:inline;}
.half {  float:left; display:inline;}
.two-thirds { float:left; display:inline;}
.image {  border-style: double; border-color:white;} 
}

/* Large screens (1024px) */
@media (min-width: 64rem) {
html { font-size: 120%; }
}

Answer 1

只需将此条件置于底部，因为您使用默认宽度覆盖它。

.column.half { width: 50%;}

@media(max-width : 320px){
    .column.half { width: 100%;}
}

Answer 2

请注意“一半”课程停止在640px上“浮动”，所以你已经从那里得到了问题...因为有更大的屏幕分辨率的设备，也许你可以更好地将320px更改为640像素：

@media (max-width: 40rem){
    .column.half
    {
        width: 100%;
    }
}

@media（320px）不使用我的列使它们100％宽度

2 个答案: