我已经设置了一个基本样式表和一个媒体查询样式表,遵循渐进式增强原理,如下所示:
<!-- Empty CSS file; base style for really old mobile browsers (128px,240px,<320px) -->
<link rel="stylesheet" href="css/global.css" media="all">
<!-- Layout for newer narrow viewport browsers, as well as desktop brows
我使用了以下在IE7中不起作用的代码。
<!-- styles to use for small screens, such as phones -->
<link rel="stylesheet" media="screen and (max-width:480px)" href="phone.css">
<!-- styles to use for medium screens, such as tablets -->
<link rel="stylesheet" media=
在Rails 3.2应用程序中,我的样式表有以下设置。我有一个application.css文件,其中定义了许多样式,其他几个文件用于更具体的样式,就像与页脚有关的一切都在footer.css中。
在开发中,一切都可以工作,但在生产中,所需文件中的任何移动样式都不会被编译,即每个样式表的@media only screen and (min-width: 768px)行以上的所有内容。
主application.css文件定义了大约700行样式,之后还包含一个@media only screen and (min-width: 768px)媒体查询。在媒体查询中,还有大约700行覆盖了桌面的前
我使用“@media only screen和(最大宽度:500 max)”在css中设置断点。
当我将它设置为在到达断点时改变颜色时,它会工作:
@media only screen and (max-width: 500px) {#container{color:black;}}
当我调整浏览器的大小时,容器div确实会变黑,但是当我将断点设置为更改div的边距时,不会触发断点。
因此,当我将查询设置为:
@media only screen and (max-width: 500px) {#container{margin-left: 0px;}}
当屏幕调整大小时,没有任何变化,就像我
我试图使用媒体查询,使宽度的div 100%为较小的屏幕。然而,媒体查询似乎不适用于我的css文件。css文件的部分代码如下:
@media all and (max-width: 500px) {
body {
background-color:lightblue;
}
}
@media all and (min-width: 500px) {
body {
background-color:red;
}
}
然而,背景颜色的变化是看不到的。当我将媒体查询放在html文件上时,它似乎是有效的。
<link rel="