@media（320px）無法與我的列配合使用，以使其寬度為100％

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更改為640px可能會更好：

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