标签: media-queries

我最近开始使用LessCSS,并且我在CSS的清晰度和可读性方面取得了相当大的成功.但是,我认为我并没有充分利用Less.

我现在正在使用Less编写我的第一个完全响应的站点,我关注性能和速度. 有一点需要注意的是,我不坚持使用"断点"方法 - 我会一直上下缩放直到它们中断,然后我编写CSS来修复它们; 这通常导致20到100个媒体查询.

我想开始使用Less来将媒体查询嵌套在我的元素中,例如下面的示例:

.class-one {
    //styles here

    @media (max-width: 768px) {
        //styles for this width
    }
}
.class-two {
    //styles here

    @media (max-width: 768px) {
        //styles for this width
    }
}

通过我的初步测试,我发现在查看编译的CSS输出时 - 这种方法导致多个(很多!)实例@media (max-width: ___px).我已经浏览了互联网,并没有找到任何明确解释嵌套/冒泡媒体查询的性能影响的内容.

更新1:我意识到更多的CSS信息导致更大的CSS文件下载 - 但我并不担心网站加载时间作为唯一的指标.在DOM准备好之后,我对浏览器对内存和性能的处理更感兴趣.

更新2和半解决方案:我发现这篇文章讨论了CSS选择器的四个主​​要类别及其效率.我强烈推荐阅读,这有助于我理解如何最好地解决我的过度媒体查询CSS.

所以我的问题是: 在DOM准备好之后,在我编译的样式表中有这么多媒体查询会影响加载时间和性能吗？

我在css中使用媒体查询来区分iphone和ipad

这是我的代码:

/* iphone 3 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) { ... }

/* iphone 4 */
@media only screen and (min-device-width : 640px) and (max-device-width : 960px) and (orientation:portrait) { ... }

/*iPad styles*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { ... }

/* i have the same for landscape */

现在我有一个分辨率冲突,iphone 4使用与ipad相同的分辨率,反之亦然.

我怎样才能解决这个问题？

对于有视网膜显示的用户,我的网站图像看起来很模糊.(例如,在Retina MacBook Pro上).

如何为具有视网膜显示的访客提供高分辨率图像,为其他人提供标准尺寸的图像,同时保持图像的相同外观尺寸？

当使用CSS媒体查询设备像素密度时,我已经看到了-moz-min-device-pixel-ratio和min--moz-device-pixel-ratio.

例如:

@media 
  only screen and (-moz-min-device-pixel-ratio: 1.5) {
  /* styles go here */
}

与

@media 
  only screen and (min--moz-device-pixel-ratio: 1.5) {
  /* styles go here*/
}

哪个是对的？

一些使用前者的教程/博客:

• http://menacingcloud.com/?c=highPixelDensityDisplays
• http://css3.bradshawenterprises.com/blog/retina-image-replacement-for-new-ipad/

一些使用后者的教程/博客,包括mozilla.org:

• http://www.slideshare.net/zomigi/css3-using-media-queries-to-improve-the-web-site-experience
• https://developer.mozilla.org/en/CSS/Media_queries/

级联是使CSS特别强大的原因.但在媒体查询的情况下,重叠可似乎有问题.

考虑以下CSS(CSS媒体查询重叠的连续规则):

/* Standard - for all screens below 20em */

body { color: black; font-size: 1em; }

/* Query A - slightly wider, mobile viewport */

@media (min-width: 20em) and (max-width: 45em) {
    body { color: red; } /* supposed to be unique for this width */
}

/* Query B - everything else */

@media (min-width: 45em) {
    body { font-size: larger; } /* because viewport is bigger */
}

因此,当屏幕正好是45em宽时,45em处的重叠将 …

我正试图用jQuery mobile触发一个事件,当设备的方向改变时,它会自动重新加载页面.我用max-device-width, orientation:landscape,和写的媒体查询orientation: portrait.由于<video>无法正确扩展...我能想到的唯一解决方案是在旋转设备的情况下将页面刷新到正确的媒体查询.

我该怎么做呢？谢谢.

情况:
我有5个CSS文件:

• base.css,其中一些样式适用于所有地方

• 339px.css,宽度可达339px

• 639px.css,宽度最大为639px

• 999px.css和

• bigscreen.css适用于宽度超过999像素的任何东西

代码:

<link rel="stylesheet" type="text/css" media="all" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:    0px) and (max-width: 339px)" href="css/339px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:  340px) and (max-width: 639px)" href="css/639px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:  640px) and (max-width: 999px)" href="css/999px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="css/bigscreen.css" />

这一切都很好,并且在设备屏幕上1 css像素等于1/96英寸(2.54cm)的任何设备上都能完美运行.然而,最近许多显示设备的像素密度远高于此,因此当339px.css合适时,它们应用于639px.css.这是一个问题,因为内容看方式太小.

另请注意,我不能使用JavaScript和台式计算机schould总是根据宽度获取相应的css文件,无论方向如何.

我想要实现的目标:

• 339px.css适用于任何设备:
  
  • 宽度<= 339px
  • 一个高分辨率但小屏幕(例如我的Android智能手机,1280x720但5.7英寸屏幕)和纵向.

基本上不是css像素,我想要一个相对于设备像素密度的单位(桌面,平板电脑,智能手机,4k显示器,"Retina"显示器,你明白了)并且可以同时使用所有主流浏览器移动和桌面平台.

与此同时,我还需要为旧版浏览器支持css像素.

这给了我一个令人头疼的问题.据我所知,您可以使用device-pixel-ratio,但我没有成功地在某些时候(两个css文件处于活动状态的区域,例如339px.css和639px.css)中使css文件"重叠".

我没办法.我已经试过的组合min-width,max-width, …

的jsfiddle

我想改变某个像素大小的浮动div的顺序.

在默认状态下,它们都具有50%的宽度,并且它们彼此相邻.

低于600px的屏幕尺寸(或w/e无关紧要)我希望第二个div(红色一个)漂浮在第一个div(黄色一个)之上.

如何仅使用CSS解决方案？

HTML

<div class="yellow"></div>
<div class="red"></div>

CSS

.yellow {
    background: yellow;
    width: 50%;
    height: 300px;
    float:left;
}

.red {
    background: red;
    width: 50%;
    height: 300px;
    float:left;
}

@media screen and (max-width:600px) {
    .yellow {
        background: yellow;
        width: 100%;
        height: 300px;
        float:left;
    }

    .red {
        background: red;
        width: 100%;
        height: 300px;
        float:left;
    }
}

我想要的解决方案是:

RED DIV

黄色的DIV

但现在是:

黄色的DIV

RED DIV

我想构建一些媒体查询,以涵盖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之间的差异很大,或者我可能误解了响应式设计概念,但这就是我的想法.

我在 Angular 中读到，使用CSS隐藏元素来隐藏这样的元素是一种非常糟糕的做法：

.container{
  background-color : powderblue;
  height : 50px;
  width : 100%
}

@media (max-width: 400px){
    .container{
        display: none;
    }

}

<div class="container"></div>

而且我知道显示或隐藏元素的 Angular 方式是使用*ngIf指令。

题

我怎样才能* ngIf以“角度方式”对媒体查询做出反应？