Tag: 媒体查询

在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> […]

我应该使用最大设备宽度还是最大宽度？: 使用CSS媒体查询，您可以使用max-device-width来定位设备宽度（例如iPhone或Android设备）和/或以页面宽度为目标的max-width宽度。如果您使用max-device-width ，当您更改桌面上浏览器窗口的大小时，CSS不会更改，因为您的桌面不会更改大小。如果使用max-width ，当您更改桌面上浏览器窗口的大小时，可能会显示移动设备的样式，例如触摸友好的元素和菜单等等。针对特定的浏览器（和设备？）现在已经被弃用了，你应该对你的目标有所不知。这也适用于媒体查询吗？你为什么要瞄准另一个呢？哪一个是推荐的？这是我在生产网站上使用的媒体查询的示例： @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) { /* Change a menu to fit the screen better, etc… */ } 我倾向于使用max-device-width和max-width 。

CSS媒体查询只针对iPad和iPad？: 嗨，我正在与多个平板设备，iPad，银河标签，macros碁Iconia，LG 3D垫等。 iPad – 1024 x 768 LG垫 – 1280 x 768 Galaxy Tab – 1280 x 800 我只想使用CSS3媒体查询来定位iPad。因为，LG和iPad的设备宽度是相同的768px – 我无法分离每个设备。我试过以下分开，但似乎没有工作： @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */ @media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) […]

Bootstrap – 当屏幕尺寸较小时删除填充或边距: 编辑：也许我应该问哪个select器设置边填充当屏幕减less到480px宽度以下？我一直在浏览bootstrap-responsiveness.css一段时间来find这个，但似乎没有任何影响。原来，我基本上想要删除任何默认的填充或边界设置为更小的设备屏幕上的响应。我在container-fluidselect器上覆盖了一个background color ，对于较大的屏幕，它们在整个宽度上完全呈现100％，但是屏幕缩小为较小的尺寸，默认情况下，Bootstrap似乎在container-fluid或container上添加了边距或填充。如果我使用自定义css来覆盖Bootstrap的默认样式，我应该覆盖什么媒体查询或select器来删除在较小的屏幕上的填充？

切换到基于Em的媒体查询: 现在WebKit 页面缩放问题已经解决，使用基于em的媒体查询而不是基于像素的媒体查询的主要原因是什么？赏金我为我的问题添加了一个奖金，因为许多着名的CSS 框架和 Web 开发人员使用基于em的媒体查询，我相信这样做是有充分的理由的。我知道的一个好处是，如果用户在浏览器中更改默认字体大小，则内容将以类似于页面缩放修复解决的问题的方式挤压。是否有任何数据显示人们实际上是否改变默认大小而不是缩放？注意为了让我的问题更具针对性，我删除了两个外围设备。原来的文章将增加透视@ nwalton的伟大的答案，这涉及到所有我问到的三点。

花式媒体查询与一些LESS魔术: 这将是很好的包装使用较less的一些CSS类中的不同分辨率的CSS样式。我想要做一些事情： footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } 最后，这样的结果应该是这样的： footer { width: 100%; } @media screen and (min-width: 768px) { footer { width: 768px; } } @media screen and (min-width: 992px) { footer { width: 940px; } } .tablet可能看起来像这样： @media […]

媒体查询 – 在两个宽度之间: 我正在尝试使用CSS3媒体查询来创build一个只在宽度大于400像素且小于900像素时出现的类。我知道这可能是非常简单的，我错过了一些明显的东西，但我无法弄清楚。我想到的是下面的代码，感谢任何帮助。 @media (max-width:400px) and (min-width:900px) { .class { display: none; } }

CSS媒体查询是否可以检测纵向/横向平板电脑模式？: 因为在JS是很容易的….类似的东西 if(window.innerHeight > window.innerWidth){ portrait = true; }else{ portrait = false; } 我可以使用它…但我想知道是否有可能使用只是CSS和@media样式有可能是这样的 @media only screen and (width > height) { //… }

视网膜显示，高分辨率的背景图像: 这可能听起来像一个愚蠢的问题。如果我使用这个CSS片段进行常规显示（其中box-bg.png为200px×200px）; .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } 如果我使用这样的媒体查询来定位视网膜显示（@ 2x图像是高分辨率版本）; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{background:url('images/box-bg@2x.png') no-repeat top left;} } 我是否需要将.box div的大小.box 400像素到400像素以匹配新的高分辨率背景图像？

Bootstrap 3断点和媒体查询: 在http://getbootstrap.com/css/上说：我们使用以下媒体查询来在我们的网格系统中创build关键断点。额外的小设备（手机，高达480px）：没有媒体查询，因为这是Bootstrap中的默认设置小设备（平板电脑，768像素及以上）：@media（min-width：@ screen-sm）{…} 中等设备（桌面，992px及以上）：@media（min-width：@ screen-md）{…} 大型设备（大型桌面，1200像素及以上）：@media（min-width：@ screen-lg）{…} 我们应该能够在媒体查询中使用@ screen-sm，@ screen-md和@ screen-lg名称吗？因为它不适合我我必须使用@media（min-width：768px）{…}之类的像素测量值才能使用。难道我做错了什么？另外，对于额外的小设备是一个错误的参考480px？不应该说高达767px？