有关CSS媒体查询的问题 [英] Question on CSS Media Query
问题描述
我对CSS媒体查询有疑问.
I have a question on CSS media query..
我正在使用desktop.css和ipad.css实现HTML页面，并希望将它们放在2个单独的文件中. 在desktop.css中，我使用@import url("ipad.css");并不仅要添加@media屏幕，而且要添加具有实际桌面样式的(device-width:768px)块.
I am implementing a HTML page using desktop.css and ipad.css and want them in 2 separate file.. In desktop.css, I use @import url("ipad.css"); and also add @media not only screen and (device-width:768px) block which has the actual desktop styles..
所以desktop.css看起来像
So desktop.css looks like
@import url("ipad.css");
@media not only screen and (device-width:768px)
{
//Desktop styles
}
现在，当iPad CSS正确地应用到iPad上时，由于某种原因，桌面CSS没有被应用. 不确定"@media不仅屏幕..."出了什么问题
Now while the iPad CSS gets applied correctly on the iPad, for some reason the CSS for desktop does not get applied.. Not sure what is wrong with the "@media not only screen ..."
我引用了 http://www.w3.org/TR/css3-mediaqueries
，它说:在媒体查询的开头出现关键字'not'会否定结果.即，如果没有'not'关键字的媒体查询为true，则它将变为false，反之亦然. "
and it says " The presence of the keyword ‘not’ at the beginning of the media query negates the result. I.e., if the media query had been true without the ‘not’ keyword it will become false, and vice versa. "
但是由于某些原因，桌面永远不会呈现样式...请帮助..谢谢..
But for some reason, the desktop never renders the styles...Please help..Thank you..
** * **** 已编辑 * *
*******EDITED**
使用这种方法可能会有什么问题?
What might be the issue with using this approach ?
@import url("desktop.css") screen;
@import url("ipad.css") only screen and (device-width:768px);
推荐答案
您尝试过类似的方法
@media only screen and (device-width: 768px) {
/* desktop styles here */
}
@media only screen and (device-width: 768px) {
/* desktop styles here */
}
因此，请丢失not，因为这使该规则适用于除屏幕(即您所用的桌面)以外的所有内容.
So, lose the not as that is what's making the rule apply to everything but the screen i.e. the desktop in your case.
这篇关于有关CSS媒体查询的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
