Tag: media queries

Respond.JS不在IE 8中工作: 出于某种原因，似乎回应JS是行不通的。我在IE 8中使用媒体查询来更改各种大小监视器的背景图像。在IE 8中没有背景，只有一个纯色。代码如下所示： <!–[if lt IE 9]> <script type="text/javascript" src="/js/html5-shiv.min.js"></script> <script type="text/javascript" src="/js/respond.min.js"></script> <![endif]–> 媒体查询如下所示： @media (min-width:769px) and (max-width:1366px){ html, body{ background: url(http://img.dovov.combackgrounds/1366-bg.jpg) no-repeat center top fixed #190303; background-size:100% auto; } } 上面的代码在IE 8中无法工作吗？我应该尝试使用另一个JS来使IE 8 Media Queries起作用吗？注意：看来html5-shiv确实有效。我正在一个实时Web服务器上testing。

响应式网页devise中的单一样式和多个样式表: 简而言之：在进行响应式网页devise时，您应该使用一个还是多个样式表？详细：在响应式devise中，您倾向于拥有一大块CSS，然后在其达到某个断点时调整布局。您可以通过以下两种方式之一构build您的代码：单个样式表 /* Main CSS */ @media only screen and (min-width: 480px) { /* CSS */ } @media only screen and (min-width: 640px) { /* CSS */ } @media only screen and (min-width: 800px) { /* CSS */ } 多个样式表 <link rel="stylesheet" media="screen" href="main.css"> <link rel="stylesheet" media="only screen and (min-width: […]

如何在一个媒体查询中定位iPhone 3GS和iPhone 4？: 我正在尝试为iPad / iPhone和较旧的iPhone执行备用布局。我已经确定最好的方法是使用CSS3规范中的@media 。因此，这些是我的媒体在一分钟的疑问： @media screen and (max-width: 1000px) { … } 以上是针对小型桌面和笔记本电脑的屏幕 @media screen and (max-width: 700px) { … } 以上是iPad和非常小的台式机/笔记本电脑屏幕。 @media screen and (max-device-width: 480px) { … } 以上是针对iPhone 3GS和移动设备的一般情况。然而，带有史蒂夫·乔布斯（Steve Jobs）所有全能歌舞表演的“视网膜”显示屏的新款iPhone 4意味着它的像素比例为2-1，这意味着浏览器实际上出现了1像素为2×2像素的分辨率（960×640）触发iPad布局，而不是移动设备布局），所以这需要另外的媒体查询（目前只支持webkit）： @media screen and (-webkit-min-device-pixel-ratio: 2) { … } 现在，事情是…我想我的shiny的新的iPhone 4布局合并与iPhone 3GS和移动设备布局，因为他们将有完全相同的内部CSS代码，因此提出我的问题; 如何创build@media规则，将iPhone 4，3GS和其他手机指向相同的样式？

CSS媒体查询 – 软键盘打破了css的方向规则 – 替代解决scheme？: 我正在使用多个平板电脑设备 – 包括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 */ } 这在所有平板设备上都可以正常工作。但是，问题是，当设备处于纵向模式，用户在任何input字段（例如search）上点击时，软键popup – 这减less了网页的可见区域，并迫使它在基于CSS的景观中呈现。在Android平板设备上，这取决于键盘的高度。所以，最终网页看起来破碎了。因此，我不能使用CSS3的方向媒体查询来根据方向应用样式（除非有更好的媒体查询来定位方向）。这是一个小提琴http://jsfiddle.net/hossain/S5nYP/5/模拟这个 – 为设备testing使用完整的testing页面 […]

为什么媒体查询的顺序在CSS中很重要？: 最近，我一直在devise更具响应性的网站，我经常使用CSS媒体查询。我注意到的一种模式是，媒体查询的定义顺序实际上很重要。我没有在每个浏览器中进行testing，只是在Chrome上进行testing。有没有解释这种行为？有时，当您的网站不能正常工作时，您会感到沮丧，并且您不确定是查询还是查询的写入顺序。这是一个例子： HTML <body> <div class="one"><h1>Welcome to my website</h1></div> <div class="two"><a href="#">Contact us</a></div> </body> CSS： body{ font-size:1em; /* 16px */ } .two{margin-top:2em;} /* Media Queries */ @media (max-width: 480px) { .body{font-size: 0.938em;} } /* iphone */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { body {font-size: 0.938em;} } /*if greater than 1280×800*/ […]

是否有可能在浏览器中模拟方向？: 由于标题是可以模仿在谷歌浏览器或Firefox的方向？意思是改变浏览器来支持媒体查询（orientation =（landscape or portrait））我有一个移动模拟器，但我想从铬或萤火虫开发人员的工具。更新 Chrome v25特定… 对于任何人，在谷歌浏览器开发工具>覆盖>覆盖设备方向，你可以改变alpha ， beta和gamma 。我认为这是一个开始的地方，但我不知道这些工作如何，因此没有find任何东西。也可以模拟CSS媒体，但不能纵向和横向，但打印，屏幕，电视等。

如何删除Twitter Bootstrap 3中的响应function？: 自Bootstrap 3以来，不再需要响应式和标准样式表的独立文件。那么如何轻松删除响应function呢？

使用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以产生流体布局。当我这样做，变量似乎被正确识别，但媒体查询条件不是。例如，无论屏幕宽度如何，上面的代码都会生成一个1160像素的布局。如果我像这样翻译@media语句： @media screen and (min-width: 1171px) {$base_width: 1160px;} @media screen and (max-width: 1170px) {$base_width: 960px;} 它会产生960像素的布局，不管屏幕宽度如何。另外请注意，如果我删除第一行$base_width: 1160px; 它会为未定义的变量返回一个错误。任何想法我失踪？