两个并列的class同时用@media只有一个生效,另一个不生效且审查元素找不到相应CSS。
如果想让两个DIV并排显示,在PC端浏览时,一个宽度占70%,另一个占30%;移动端浏览时第一个div全屏显示,第二个div不显示,用了如下代码,其中第一个div想要的效果达成了,第二个div没生效,CSS写成内联式和外部式都不起作用,在浏览器中审查元素也找不到相关CSS代码,这是什么情况原因导致的呢?
@media (min-width: 768px){
.article-detail {position: relative;float: left;width: 70%;}
}
@media (max-width: 768px){
.article-detail {position: relative;float: left;width: 100%;}
}
@media (max-width:768px){
.right-contant {position: relative;float: right;width: 30%;}
}
@media (max-width:768px){
.right-contant {display: none;}
}