相关疑难解决方法(0)
CSS媒体查询重叠的规则是什么？
我们如何准确地隔离媒体查询以避免重叠？
例如,如果我们考虑代码:
@media (max-width: 20em) {
/* for narrow viewport */
}
@media (min-width: 20em) and (max-width: 45em) {
/* slightly wider viewport */
}
@media (min-width: 45em) {
/* everything else */
}
在所有支持的浏览器中,准确的20em和45em会发生什么？
我见过人们使用:像799px然后800px的东西,但屏幕宽度为799.5像素呢？(显然不是常规显示器,而是视网膜显示器？)
考虑到规格,我对这里的答案最感兴趣.
推荐指数
解决办法
查看次数
在CSS中嵌套@media规则
各种浏览器的支持似乎有所不同.
检查链接
Firefox:黑色,带白色文字.
Opera,Chrome,IE9:蓝色与黑色文本.
哪个是正确的,我将如何使其保持一致？
代码
@media screen and (min-width: 480px) {
body{
background-color:#6aa6cc;
color:#000;
}
@media screen and (min-width: 768px) {
body{
background-color:#000;
color:#fff;
}
}
}
有趣的是,似乎在条件内嵌套媒体查询@import似乎有效.
例如:
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Media test</title>
<link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
<h1>Why is this not consistent.</h1>
</body>
</html>
importer.css
@import url(media.css) screen and (min-width: 480px);
media.css
body {
background-color: #6aa6cc;
color: #000;
}
@media screen and (min-width:768px) {
body …推荐指数
解决办法
查看次数
我可以以if/else方式使用@media吗？
我将此表单放在页面的页脚中(只有一个文本框和一个按钮).我想@media根据可用的视口宽度尝试应用它...例如,在我的情况下,这个形式的全宽度需要大约270px左右.所以我想应用CSS来说:
if the width available is at least 270px
apply first set of CSS rules
else
apply second set of CSS rules
我怎么能用这个@media呢？
推荐指数
解决办法
查看次数
CSS @media检查是否不是Webkit
我正在尝试创建一个单独的CSS文件,如果浏览器使用webkit,则应用一种样式,如果不是,则创建另一种样式.我读了如何检查它是否使用Webkit:
@media (-webkit-min-device-pixel-ratio:0)
但是,我无法弄清楚如何检查它是否使用Webkit.我尝试not在媒体查询前添加,但它似乎不起作用.任何人都有解决方案或更好的方法吗？谢谢.
推荐指数
解决办法
查看次数
为什么Bootstrap在其媒体查询中使用屏幕大小阈值之间的0.02px差异？
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
代码示例源: …
推荐指数
解决办法
查看次数
为什么`not (some-width: Xem)` 媒体查询永远不会触发？
我正在尝试否定max-device-width媒体查询（这样做的原因是我不会两者兼而有之(max-device-width: X)，(min-device-width: X)如果设备恰好具有该宽度则触发）。不幸的是，not (min-or-max-some-width: X)媒体查询永远不会触发。
这是一个小小提琴。我希望桌面上有两条黄线，移动设备上有两条红线。我得到的是桌面上只有一条黄线（最后一条），而移动设备上只有一条红线（第一条）。
我究竟做错了什么？
推荐指数
解决办法
查看次数
border-radius在Chrome中不起作用？任何解决方法？
我已将border-radius(以及-moz-border-radius旧版浏览器)设置为20px,并且我在Safari和Firefox中都能很好地工作.然后,我打开Chrome,它拒绝接受定义的border-radius.有关在Chrome中解决此问题的建议吗？
请参阅此处的CSS编码: http ://jsfiddle.net/MAYea/
Safari中的屏幕截图:
Chrome屏幕截图:
推荐指数
解决办法
查看次数