标签: media-queries

如何调试css的方向:Chrome Developer工具中的肖像？

我写的内容 (orientation:portrait)无法通过Firebug和Chrome Developer工具动态编辑.它始终显示正常的属性.

/*normal styles here */
#wrap {
   width:1024px;
}
@media only screen and (orientation:portrait){
   /* portrait styles here */
   #wrap {
      width:768px;
   }
}

我有一个使用@media查询的网站,但它似乎没有设置它们.它们始终保持默认样式.

例如:

#div1 { background:red}

@media screen and (max-height:912px) {
#div1{background:blue}
}

将永远坚持背景:红色,除非我使用,!important但在我的媒体查询中,我正在造型这么多选择器.我是否需要设置每个选择器样式!important？

这必须在之前得到解答,但我找不到相关的问题.

我设计了一个响应式网站,css媒体查询一直向下,以便在320宽度上正确显示.

我想要的是iPhone4(640 x 960)在纵向模式(640宽)时坚持媒体查询,就好像它的显示宽度= 320像素一样.理由:即使iphone有更多像素,我也希望向这些用户显示简化的布局,类似于非高密度手机的用户.

有没有办法做到这一点,例如为这些高像素密度手机指定一些元标签？

当然,我可以为iphone 4等定义单独的媒体查询,min-device-pixel-ratio: 2但这会导致单独的css媒体查询(一个用于低密度,一个用于高像素密度),这些查询基本上具有相同的逻辑,这看起来不是很干给我(http://en.wikipedia.org/wiki/Don%27t_repeat_yourself)

奇怪的是:新的Ipad 3,像素密度为2,DOES正确呈现我想要的方式,即:它模仿(至少在css媒体查询方面)一个分辨率为一半的设备.

我怎样才能运行jquery函数@media screen？

背景:

我有一个screen.css样式表和一个print.css样式表.我有两个javascript函数,其中一个我不想在页面的打印版本上运行.

在我的移动应用程序的iframe中加载网站时,我有一个奇怪的问题.我有一个有七页的网站.当我在iphone的safari中浏览我的网站网址时.所有页面中的内容都呈现完美.但如果我在我的移动应用程序内的iframe中加载网站,android会在移动应用程序的iframe内正确呈现网站.但在iPhone的三个页面内容溢出,我看不到整页.我的媒体查询如下所示.顺便说一下,我正在为我的网站使用bootstrap框架.

    @media (min-width: 768px) and (max-width: 979px) {
      // css goes here
    }
    @media (min-width: 768px)
    {
     // css goes here        
    }
    @media (max-width: 767px) {
     // css  goes here              
    }
    @media (min-width: 1200px) {
        // css goes here              
    }
    @media (min-width: 768px) and (max-width: 979px) {
       // css goes here              
    }
    @media (max-width: 767px) {
       // css goes here 
    }
    @media (max-width: 480px) {
       // css goes here …

我正在使用Bootstrap 3.在大屏幕上我想在左边有一个侧边栏,在右边有一个maincontent.在小屏幕上,我希望侧边栏上有重要的块,然后是主要内容,然后是侧边栏中不太重要的块.有没有办法实现这一目标？

这是一个显示问题的JS Bin:http://jsbin.com/wibucopi/1/及以下是当前代码(但是,它在小屏幕上显示所有侧边栏内容).

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <div class="upper" style="background:red">
        <h3>I want to be <b>above</b> the main content on small screens!</h3>
      </div>
      <div class="lower" style="background:green">
        <h3>I want to be <b>below</b> the main content on small screens!</h3>
      </div>
    </div>
    <div class="col-sm-9">
      <h1>Main content</h1>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </div>
</div>

我已经玩过col-sm-pull/push-x,但我只能实现整个侧边栏显示在小屏幕上的主要内容下面.

我不想重复的内容和显示/隐藏用它visible-XY,hidden-XY作为该网页将变得越来越大,那感觉绝对错误的.

有一个纯粹的Bootstrap css解决方案,或者至少只有一个css(我不想使用js)会很棒.

我知道有两种方法可以添加媒体查询:

HTML链接:

<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">

CSS:

@media all and (max-width: 1024px) {
    ......
}

我已阅读文档,我理解这两种方法之间的明显区别.但是,以下是2个问题我怀疑你是否可以澄清:

1)浏览器是否以不同于CSS媒体查询的方式处理HTML媒体链接？我的意思是,我知道如果在css中添加CSS媒体查询,所有css文件都会被下载到所有设备,并且当浏览器解释编译的css时,只有相应的媒体查询才会生效.但是如果媒体链接是用HTML添加的,那么它是否意味着浏览器只会在匹配指定宽度的设备时才下载foo.css？与Css媒体查询相比,浏览器处理HTML媒体链接的方式是否存在差异,或者它们是否完全相同但只是添加到网页的不同方式？

2)假设foo.css还有1024px以外的较小宽度的媒体查询,如下所示:

body {
   padding: 10px;
}     
@media all and (max-width: 900px) {
    body {
       padding: 5px;
    }     
}    
@media all and (max-width: 800px) {
    body {
       padding: 0px;
    }     
}

如果使用HTML链接添加上述文件,如下所示:

<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">

这会成为浏览器看待它的嵌套媒体查询吗？我不明白的是,如果使用html链接添加上述内容,我不知道浏览器是否真的会像这样看起来无效:

@media all and (max-width: 1024px) {
    body {
       padding: 10px;
    } 

    @media all and (max-width: 900px) {
        body {
           padding: 5px;
        } 

    } …

使用以下内容,Chrome不会尊重媒体查询,以根据设备宽度显示正确的视频源.Chrome正在播放它找到的第一个来源,你可以在这里看到:http://homeglobal.ch/.我怎样才能解决这个问题？

    <video id="intro-video" poster="img/poster.png" controls>
        <source src="videos/intro.mp4" type="video/mp4" media="all and (min-device-width:1600px)">
        <source src="videos/intro.webm" type="video/webm" media="all and (min-device-width:1600px)">
        <source src="videos/intro-1600.mp4" type="video/mp4" media="all and (min-device-width:1100px)">
        <source src="videos/intro-1600.webm" type="video/webm" media="all and (min-device-width:1100px)">
        <source src="videos/intro-1100.mp4" type="video/mp4" media="all and (min-device-width:481px)">
        <source src="videos/intro-1100.webm" type="video/webm" media="all and (min-device-width:481px)">
        <source src="videos/intro-480.mp4" type="video/mp4">
        <source src="videos/intro-480.webm" type="video/webm">
    </video>

我无法找到关于什么initial-scale=1.0和initial-scale=2.0方法的明确定义.

它们都意味着什么？

我知道initial-scale与缩放有关,我只是不知道1-10的意思是什么值.

资料来源:https://www.w3.org/TR/css-device-adapt-1/#translate-meta-to-at-viewport

我目前有以下宽度特定的媒体查询.

 @media only screen and (max-width: 1920px) {
    .toggleMultiSelect .filter {
        width: 566px;
    }
 }

但" .toggleMultiSelect .filter " 的宽度在IE中从Chrome/Firefox发生了变化.所以基本上需要在1920px中为IE使用相同css类的不同宽度.从Stackoverflow搜索我发现IE特定的行为可以像下面这样实现.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .toggleMultiSelect .filter {
        width: 575px;
    }
}

所以现在我需要实现分辨率和css类.575px宽度仅适用于IE和Chrome或firefox应该获得566px.

在此先感谢您的帮助.