Questions tagged «media-queries»

媒体查询可以根据媒体类型（例如屏幕和打印）以及媒体功能的条件（例如视口以及设备高度和宽度）来有条件地应用CSS样式。它们是W3C CSS3规范的一部分。

5
如何使用CSS媒体查询检测设备方向？
在JavaScript中，可以使用以下方式检测方向模式： if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } 但是，有没有办法仅使用CSS来检测方向？ 例如。就像是： @media only screen and (width > height) { ... }
4
媒体查询-在两个宽度之间
我正在尝试使用CSS3媒体查询来创建一个仅在宽度大于400px且小于900px时出现的类。我知道这可能非常简单，并且我遗漏了一些明显的内容，但我无法弄清楚。我想出的是下面的代码，感谢任何帮助。 @media (max-width:400px) and (min-width:900px) { .class { display: none; } }
141 css  media-queries 
11
在javascript中获取设备宽度
有没有一种方法可以使用javascript获取用户设备的宽度（而不是视口宽度）？ 我可以说CSS媒体查询提供了这一点 @media screen and (max-width:640px) { /* ... */ } 和 @media screen and (max-device-width:960px) { /* ... */ } 如果我将智能手机定位为横向模式，这将很有用。例如，在iOS max-width:640px上，即使在iPhone 4上，声明也 将同时针对横向和纵向模式。据我所知，对于Android，情况并非如此，因此在这种情况下使用device-width成功地针对两个方向，而不定位桌面设备。 但是，如果我基于设备宽度调用javascript绑定，则似乎只能测试视口宽度，这意味着需要进行以下额外测试， if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ } 考虑到设备宽度可供CSS使用的提示，这对我来说似乎并不优雅。
7
在CSS3媒体查询中使用Sass变量
我试图结合使用Sass变量和@media查询，如下所示： $base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} $base_width 然后在基于样式表宽度百分比的度量中的各个点定义，以生成流畅的布局。 当我这样做时，似乎可以正确识别该变量，但不能进行媒体查询的条件。例如，上面的代码将产生1160px的布局，而不考虑屏幕的宽度。如果我像这样翻转@media语句： @media screen and (min-width: 1171px) {$base_width: 1160px;} @media screen and (max-width: 1170px) {$base_width: 960px;} 无论屏幕的宽度如何，它都会产生960px的布局。还要注意，如果我删除了$base_width: 1160px;它的第一行，则返回一个未定义变量的错误。有什么想法我想念的吗？
3
视网膜显示器，高分辨率背景图像
这听起来像是一个愚蠢的问题。 如果我将此CSS代码段用于常规显示（box-bg.png200px x 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;} } 我是否需要将.boxdiv 的大小加倍到400px x 400px，以匹配新的高分辨率背景图像？
6
Chrome设备模式仿真媒体查询不起作用
由于某种原因，设备仿真模式无法读取我的媒体查询。它可以在其他网站上使用，包括我使用引导程序创建的自己的网站，但不适用于我从头开始使用的媒体查询（单击媒体查询按钮会将按钮变为蓝色，但不会显示任何媒体查询）。测试文件如下。这是Chrome中的错误，还是我的文件需要更改？ <!DOCTYPE html> <!-- Media Queries Example 1 Sam Scott, Fall 2014 --> <html> <head> <title>MQ Example 1</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: sans-serif; } h1 { color: red; } h2 { color:blue; } p { color:green; } @media (max-width: 768px) and (min-width: 481px) { …
12
Bootstrap-在屏幕尺寸较小时删除填充或边距
编辑： 也许我应该问，当屏幕缩小到480px以下时，哪个选择器会设置边距？我已经浏览bootstrap-sensitiveness.css一段时间了，但是似乎没有任何影响。 原始 我基本上想删除任何默认的填充或边距，以便在较小的设备屏幕上设置响应速度。 我有一个background color覆盖在container-fluid选择器和用于更大的屏幕他们提供横跨宽度完全100％，但是他们在屏幕减小到更小的尺寸，在默认情况下，自举似乎添加余量或填充上container-fluid或container。 <div class="container-fluid"> <div class="row-fluid"> test </div> </div> 如果我使用自定义CSS覆盖Bootstrap的默认样式，那么在较小的屏幕上我应该覆盖哪种媒体查询或选择器以删除此填充？
3
CSS媒体查询重叠的规则是什么？
我们如何准确地间隔媒体查询以避免重叠？ 例如，如果我们考虑以下代码： @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 px呢？（显然不是在常规显示器上，而是在视网膜显示器上？） 考虑到规格，我对此最好奇。
6
使用Sass在媒体查询中扩展选择器
我有一个项目类和一个紧凑的“修饰符”类： .item { ... } .item.compact { /* styles to make .item smaller */ } 这可以。但是，我想添加一个@media查询，.item以在屏幕足够小时强制类紧凑。 乍一想，这就是我试图做的事情： .item { ... } .item.compact { ... } @media (max-width: 600px) { .item { @extend .item.compact; } } 但这会产生以下错误： 您不能从@media内部扩展外部选择器。您只能在同一指令中使用@extend选择器。 我如何使用SASS来完成此任务而不必诉诸复制/粘贴样式？
12
CSS Media Query-软键盘打破了CSS定位规则-替代解决方案？
我正在使用多个平板电脑设备-均为Android 和iOS。目前，对于所有平板电脑，我都有以下分辨率差异。 1280 x 800 1280 x 768 1024 x 768（显然是iPad） -iPad没有此问题 应用基于设备方向的样式的最简单方法是使用以下语法来使用媒体查询的方向。 @media all and (orientation:portrait) { /* My portrait based CSS here */ } @media all and (orientation:landscape) { /* My landscape based CSS here */ } 在所有平板电脑设备上都可以正常工作。但是，问题是，当设备处于纵向模式并且用户点击任何输入字段（例如，搜索）时，软键盘会弹出-这会减小网页的可见区域，并迫使其以基于横向的CSS呈现。在Android平板电脑设备上，这取决于键盘的高度。因此，最终该网页看起来很破损。因此，我不能使用CSS3的定向媒体查询来基于定向应用样式（除非有更好的媒体查询来定向定向）。这是一个小提琴http://jsfiddle.net/hossain/S5nYP/5/，它可以进行模拟-对于设备测试，请使用完整的测试页-http://jsfiddle.net/S5nYP/embedded/result/ 这是从演示页面获取的行为的屏幕截图。 因此，除了解决此问题外，还有什么替代方法，如果基于本机CSS的解决方案不起作用，我愿意接受基于JavaScript的解决方案。 我在http://davidbcalhoun.com/2010/dealing-with-device-orientation上找到了一个代码段，该代码段建议在上面添加类并以此为目标。例如： <html class="landscape"> <body> <h1 class="landscape-only">Element Heading - …
3
我应该使用最大设备宽度还是最大宽度？
使用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。
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.