我最近问了一个问题,关于如何使用媒体查询,同时支持对不支持媒体查询的旧浏览器的回退。唯一的答案(虽然它有效)是使用adapt.js之类的javascript来确定加载哪个样式表。
我一直在修修补补,并意识到一个令人难以置信的简单的解决方案,无论如何,在IE7中对我都有效,如下所示:
.wrapper{width:1024px;}
@media all and (min-width: 1025px) {
.wrapper{width:1024px;}
}
@media all and (max-width: 1024px) {
.wrapper{width:1024px;}
我一直在写媒体查询,在我所有正常的CSS样式(台式机和笔记本设备)之后。但是,最近,在查看一些示例和引导CSS文件时,我注意到媒体查询是在编写css之后直接进行的。这个例子能更好地说明我的问题,
.content {
padding-top: 20px;
padding-bottom: 40px;
font-size: 1rem;
}
.something{
background: red;
padding:20px;
width:800px;
}
// The Media Queries after I write all nor
如果我在单个CSS文件中有所有媒体类型,例如
下面是style.css的内容
@media only screen and (min-width: 480px) {
/* Style adjustments for viewports 480px and over go here */
}
@media only screen and (min-width: 768px) {
/* Style adjustments for viewports 768px and over go here */
}
@media print {
/* Style adjustments fo