use*_*612 1 html css jquery css3 jquery-mobile
我正在为我的网站应用css媒体查询,以便在移动设备和笔记本电脑上工作.我使用以下媒体查询移动
@media only screen and (min-device-width : 321px) and (max-device-width:480px)
以下是笔记本电脑
@media only screen and (min-device-width: 1100px)
问题是我应用我的第一个移动查询,第二个用于笔记本电脑,移动用户界面是正确的但笔记本电脑用户界面显示不同的结果.当我从我的列表中删除移动css,并只保留第二个查询css.laptop UI是正确的.
请指导我做错的地方......
包括这个<head></head>(如果你没有)
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
根据您的要求更改@media样式//更改宽度
@media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
现在我试着解释一下.. :)
@media (max-width:500px)
对于一个窗口max-width中500px要应用这些样式.在这种情况下,在大多数情况下,你会谈论比桌面屏幕小的任何东西.
@media screen and (max-width:500px)
对于一个设备screen和一个窗口max-width的500px应用的样式.这几乎与上面的相同,除了您指定的screen是与其他媒体类型相反 的最常见的其他媒体类型print.
@media only screen and (max-width:500px)
以下是W3C直接引用的解释.
关键字"
only'也可用于隐藏旧用户代理的样式表.用户代理必须处理以"仅"开头的媒体查询,就好像"仅"关键字不存在一样.
由于没有像" only" 这样的媒体类型,旧版浏览器应该忽略样式表.
我尝试在这里收集更多信息,从网上收集.
@media all and (min-width: 500px) {
}
@media all and (max-width: 500px) and (min-width: 300px) {
}
@media all and (max-width: 299px) {
}
If
这就是媒体查询:逻辑if语句."如果"浏览器的这些内容都是正确的,请使用内部的CSS.
And
关键字和.
@media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
逗号分开.
@media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
从技术上讲,这些被视为分离媒体查询,但这是有效和或.
Not
使用关键字not反转逻辑.
@media not all and (max-width: 600px) {
html { background: red; }
}
只是没有(最大宽度:600px)似乎不适合我,因此上面稍微有点时髦的语法.也许有人可以向我解释.请注意,这不仅适用于当前媒体查询,因此如果您以逗号分隔,它只会影响它所在的媒体查询.另请注意,不是整个媒体查询的逻辑,而不是整个媒体查询的逻辑.不是x和y =不是(x和y)≠(不是x)和y
独家
为了确保只有一个媒体查询在时间上生效,请使数字(或其他)成为可能.以这种方式精神管理它们可能更容易.
@media (max-width: 400px) {
html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
@media (min-width: 801px) {
html { background: blue; }
}
逻辑上这有点像一个switch语句,只是没有一个简单的方法来做"如果这些都不匹配"就像默认一样.
重写
没有什么可以防止多个媒体查询同时成立.在某些情况下使用它可能更有效,而不是将它们全部排除在外.
@media (min-width: 400px) {
html { background: red; }
}
@media (min-width: 600px) {
html { background: green; }
}
@media (min-width: 800px) {
html { background: blue; }
}
媒体查询不会对它们包含的选择器添加任何特异性,但源顺序仍然很重要.以上将有效,因为它们是正确的订购.交换该顺序,在浏览器窗口宽度超过800px时,背景将是红色的,也许是好奇的.
移动优先
您的小屏幕样式位于常规屏幕CSS中,然后随着屏幕变大,您可以覆盖所需的内容.所以,一般来说,min-width媒体查询.
html { background: red; }
@media (min-width: 600px) {
html { background: green; }
}
桌面第一
您的大屏幕样式位于常规屏幕CSS中,然后随着屏幕变小,您可以覆盖所需的内容.所以,一般来说,max-width媒体查询.
html { background: red; }
@media (max-width: 600px) {
html { background: green; }
}
你可以随心所欲地复杂化.
@media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
请注意,唯一的关键字旨在阻止非媒体查询支持浏览器不加载样式表或使用样式.不确定有多么有用/仍然有用.
| 归档时间： |
|
| 查看次数： |
1430 次 |
| 最近记录： |