您好,我的网站快完成了,但我有一个小问题,即在移动设备上时,列没有以 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%; }
}
最佳答案
只需将此条件放在底部,因为您用默认宽度覆盖了它。
.column.half { width: 50%;}
@media(max-width : 320px){
.column.half { width: 100%;}
}
关于html - @media (320px) 无法使用我的列使它们成为 100% 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26961913/