html - @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%;}
}