标签: media-queries

Chrome 76 添加了对prefers-color-scheme媒体查询的支持（又名“暗模式”）。

但是，如何在不打开和关闭系统暗模式的情况下轻松地以两种配色方案测试我的网页？

这是Firefox的相同问题，但我在 Chrome 和 Chrome DevTools 中找不到类似的设置。

由于标题可以在谷歌浏览器或Firefox中模拟方向？意思以某种方式更改浏览器以支持媒体查询(方向=(横向或纵向))

我有一个移动模拟器,但我想从chrome或firebug获得开发人员工具.

更新

Chrome v25具体......

对于任何人,在Google Chrome开发者工具>覆盖>覆盖设备方向,您可以更改alpha,beta和gamma.我认为这是一个开始的地方,但我不知道这些是如何工作的,因此无法找到任何东西..

也可以模拟CSS媒体,但不是肖像和风景,而是打印,屏幕,电视等.

更新v2

这是一个老问题,Chrome已经多次更改了如何执行此操作.

我希望我的网页的视口宽度等于设备宽度,只要设备宽度 > 450px,否则450px(我的布局动态缩放,但在450px宽度以下看起来不太好).

以下两个元标记在平板电脑上运行良好,其中设备宽度> 450px:

<!-- uses device width -->
<meta name="viewport" content="width=device-width" />

<!-- use of initial-scale means width param is treated as min-width -->
<meta name="viewport" content="width=450, initial-scale=1.0" />

但是,在手机上(例如设备宽度= 320px),前者对于内容来说太薄了; 后者导致浏览器放大,因此用户必须手动缩小才能看到内容.

或者,此元标记在手机上运行良好

<meta name="viewport" content="width=450" />

但没有利用平板电脑上的额外宽度.

任何帮助/想法将非常感激(如果它有所作为,我正在使用GWT).

我开发了一个使用twitter bootstrap的网站,似乎在IE8及以下版本的所有IE浏览器中,响应式布局部分都被破坏了.这些浏览器不支持这个吗？

我正在构建一个响应式页面,媒体查询的宽度大小错误.我正在使用Chrome.

@media screen and (max-width: 1200px) {
 .logo-pic {
    display: none;
}
}

例如,此规则适用于仅以错误的大小触发.此规则以1320px而非1200px激发.我有html的meta标签.它似乎是触发媒体查询100左右像素比它应该更宽.

<meta name="viewport" content="width=device-width, initial-scale=1">

我检查了我之前的响应网站,这些断点正在正确触发.我在不同的网站上测试了浏览器,媒体查询也很好.

我发现了一个关于堆栈溢出的类似问题,但它没有得到答复.

介质查询错误值的断点

不确定是什么问题？

我正在阅读的大多数使用媒体查询的教程都在演示如何使用min-width,但我很少看到人们使用max-width.

这是某种设计趋势或模式,为什么人们会使用min-width它max-width？

例如,我正在设计一个从移动设备开始,一直到桌面的网站.我正在使用Foundation 4,但使用媒体查询删除页面上的各种元素并重新定位源顺序.

我面临的一件事是任何宽度为360px或更小的设备的自定义导航.我希望它们具有垂直导航,而不是内联水平.所以我的想法是max-width用来定位这些设备.

如果我先min-width设计手机,我应该使用吗？即所有默认样式都是针对移动设备,因此使用min-width逐步增强布局？

我正在尝试对我正在构建的网站使用一些媒体查询.然而,我遇到的问题是,当媒体查询样式实际被应用时,它们被覆盖.我不能为我的生活告诉为什么,因为我使用相同的精确选择器.任何人都可以指出我没有看到的东西吗？

原始CSS

#global-wrapper-outer > #global-wrapper-inner {
    width: 85%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
    #global-wrapper-outer > #global-wrapper-inner > nav {
        background: #fff;
        padding-bottom: 20px;
        box-shadow: 0 4px 2px -2px gray;
    }

媒体查询CSS

@media screen and (max-width:1024px) {
    #global-wrapper-outer > #global-wrapper-inner {
        width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}

第二个媒体查询工作正常,我将导航设置为无显示.但是,当我尝试将#global-wrapper-inner的宽度设置为100%时,它不适用.当我按下F12并选择该元素时,我可以看到样式被"应用".但是,样式本身被划掉并且实际上没有应用,它仍然具有85%的原始宽度.

我正在尝试为iPad/iPhone和旧款iPhone实现替代布局.

我已经确定最好的方法是使用@mediaCSS3规范.

因此,这些是我的媒体查询:

@media screen and (max-width: 1000px) { ... }

以上是小型台式机和笔记本电脑屏幕.

@media screen and (max-width: 700px) { ... }

以上是适用于iPad和非常小的台式机/笔记本电脑屏幕.

@media screen and (max-device-width: 480px) { ... }

以上是iPhone 3GS和移动设备.

然而,新的iPhone 4与史蒂夫乔布斯的所有歌唱全舞"视网膜"显示意味着它的像素比率为2-1意味着1像素实际上出现在浏览器2x2像素使其分辨率(960x640 - 意味着它将触发iPad布局而不是移动设备布局)因此这需要另外的媒体查询(仅限webkit支持):

@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

现在,问题是......我希望我的闪亮的新iPhone 4布局与iPhone 3GS和移动设备布局合并,因为它们都具有完全相同的内部CSS代码,

因此提出我的问题;

如何创建@media将iPhone 4,3GS和其他手机指向相同样式的规则？

对于响应式模板,我在CSS中有一个媒体查询:

@media screen and (max-width: 960px) {
 body{
 /*  something */
 background:red;
 }
}

并且,我在调整大小到日志宽度时创建了一个jQuery函数:

$(window).resize(function() {
 console.log($(window).width());
 console.log($(document).width()); /* same result */
 /* something for my js navigation */
}

与CSS检测和JS结果有区别,我有这个元:

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/> 

我想这是由于滚动条(15像素).我怎么能做得更好？

我目前正在尝试设计一个兼容多种屏幕尺寸的布局.我正在设计的屏幕尺寸如下:

屏幕尺寸:

1. 640×480
2. 800×600
3. 1024×768
4. 1280x1024(及更大)

我遇到的问题是创建css3媒体查询,以便当窗口的宽度达到其中一个宽度时,我的布局会发生变化.下面是我正在使用的媒体查询的示例,但它不适合我,所以我想知道是否有人可以帮我修复它.

<link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/devices/screen/layout-modify1.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/devices/screen/layout-modify2.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 901px)" href="css/devices/screen/layout-modify3.css">

我尝试使用一组新的媒体查询,但它们仍然不适合我.请有人帮忙解释一下我的错误.你们当中有几个人已经尝试过解释,但我没有得到它.新媒体查询显示如下:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 640px)" href="css/devices/screen/layout-modify1.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="css/devices/screen/layout-modify2.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/devices/screen/layout-modify3.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 1280px)" href="css/devices/screen/layout-modify4.css">