我们如何准确地隔离媒体查询以避免重叠？
例如,如果我们考虑代码:
@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媒体查询.我注意到的一种模式是定义媒体查询的顺序实际上很重要.我没有在每个浏览器中测试它,只是在Chrome上测试.这种行为有解释吗？有时,当您的网站无法正常工作时会感到沮丧,并且您不确定它是查询还是查询的编写顺序.
这是一个例子:
HTML
<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two"><a href="#">Contact us</a></div>
</body>
CSS:
body{
font-size:1em; /* 16px */
}
.two{margin-top:2em;}
/* Media Queries */
@media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
@media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;} …我正在重新设计我的博客,其中考虑了响应式网页设计,以及"移动优先"方法 - 简而言之,我正在尝试使用min-width来避免任何类型的复制或css ..没有显示:无等等.
我的问题是,当我确实需要覆盖CSS值时,较低的最小宽度优先.例:
@media only screen and (min-width: 600px) {
h2 { font-size: 2.2em; }
}
@media only screen and (min-width: 320px) {
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}
我期待当我在600px及以上的分辨率下得到2.2em h2,但我得到1.7em ..在我的开发工具中,我看到2.2em声明在那里,但另一个优先.这没有意义!
我可以继续使用最小宽度并有效地覆盖较高分辨率的声明而不使用更强的选择器或最大宽度..？
我想构建一些媒体查询,以涵盖PC /笔记本电脑的大部分宽高比.
我的第一次尝试是这样的:
@media screen and (min-device-aspect-ratio: 4/3){
header::after{
content: '4/3';
}
}
@media screen and (min-device-aspect-ratio: 16/9){
header::after{
content: '16/9';
}
}
@media screen and (min-device-aspect-ratio: 16/10){
header::after{
content: '16/10';
}
}
我正在测试那些分辨率为1366x768的笔记本电脑的查询,这是16/9的宽高比,而不是这个,执行16/10的最后一次查询.
我可以用经典的方式做到这一点,有:
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
但我认为响应式设计应该更多地关注宽高比而不是屏幕宽度,因为它在4:3和16/9之间的差异很大,或者我可能误解了响应式设计概念,但这就是我的想法.
css aspect-ratio screen-resolution media-queries responsive-design
我有一个SVG,其中一些元素根据媒体查询旋转,如下所示:
@media (max-width: 480px) {
rect {
transform: rotate(10deg);
}
}
元素旋转得很好,但(至少在Chrome中)它拒绝返回.这是为什么？其他指令,例如填充,在两个方向上都有效.
JSFiddle:http://jsfiddle.net/MM3VC/1/