Tag: 媒体查询

是否有可能将CSS @media规则内联？: 我需要dynamic加载横幅图像到HTML5应用程序，并希望有几个不同的版本，以适应屏幕宽度。我无法正确确定手机的屏幕宽度，所以我唯一能想到的方法是添加div的背景图像，并使用@media来确定屏幕宽度并显示正确的图像。例如： <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span> 这是可能的，还是有没有人有任何其他的build议？

媒体查询检测设备是否是触摸屏: 什么是使用媒体查询最安全的方式，使不在触摸屏设备上的事情发生？如果没有办法，你是否build议使用JavaScript解决scheme，如!window.Touch或Modernizr？

$（window）.width（）与媒体查询不一样: 我在一个项目上使用Twitter Bootstrap。除了默认的引导样式，我还添加了一些我自己的 //My styles @media (max-width: 767px) { //CSS here } 我也使用jQuery来改变视图的宽度小于767px的页面上的某些元素的顺序。 $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar")); } } 我遇到的问题是由$(window).width()计算的宽度和由CSS计算的宽度看起来不一样。当$(window).width()返回767时，css计算它的视口宽度为751，所以似乎有一个16px的不同。有谁知道是什么原因造成的，我怎么能解决这个问题？人们已经提出，滚动条的宽度没有被考虑，使用$(window).innerWidth() < 751是要走的路。但理想情况下，我想find一个解决scheme，计算滚动条的宽度，这是符合我的媒体查询（例如，两个条件检查值767）。因为肯定不是所有的浏览器将有一个16px的滚动条宽度？

媒体查询中的“屏幕”和“唯一屏幕”有什么区别？: 媒体查询中的“屏幕”和“唯一屏幕”有什么区别？ <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> 为什么我们要求使用' Only '。 screen本身是否提供了足够的信息来渲染只有屏幕？我见过很多响应式网站。一些使用 @media screen and (max-width:632px) 一些 @media (max-width:632px) 还有一些 @media only screen and (max-width:632px)

为什么我的CSS3媒体查询不适用于移动设备？: 在styles.css中，我正在使用媒体查询，两者都使用以下变体： /*–[ Normal CSS styles ]———————————-*/ @media only screen and (max-width: 767px) { /*–[ Mobile styles go here]—————————*/ } 当我缩小窗口的时候，网站的大小会根据我想要的常规浏览器（Safari，Firefox）的大小来调整，但是移动设备在手机上根本不显示。相反，我只看到默认的CSS。任何人都可以指向正确的方向吗？

IE8支持CSS Media Query: IE8不支持以下CSS媒体查询： @import url("desktop.css") screen and (min-width: 768px); 如果不是，写作的替代方式是什么？在Firefox中也是一样。任何问题与下面的代码？ @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);

Twitter Bootstrap 3：如何使用媒体查询？: 我使用Bootstrap 3来构build一个响应式布局，根据屏幕大小调整几个字体大小。我如何使用媒体查询来制作这种逻辑？

媒体查询可以基于div元素而不是屏幕来resize吗？: 我想使用媒体查询来调整元素的大小，根据他们所在的div元素的大小。我不能使用屏幕大小，因为div只是像网页中的小部件一样使用，其大小可能会有所不同。更新看起来现在正在做这个工作： http : //responsiveimagescg.github.io/cq-usecases/

移动网站的最大设备宽度和最大宽度有什么区别？: 我需要为iPhone / Android手机开发一些HTML页面，但最大设备宽度和最大宽度有什么区别？我需要为不同的屏幕尺寸使用不同的CSS。 @media all and (max-device-width: 400px) @media all and (max-width: 400px) 有什么不同？

媒体查询：如何定位桌面，平板电脑和移动设备？: 我一直在做一些关于媒体查询的研究，我还不太了解如何定位一定大小的设备。我希望能够瞄准桌面，平板电脑和手机。我知道会有一些差异，但是有一个可以用来定位这些设备的通用系统会很好。我发现了一些例子： # Mobile only screen and (min-width: 480px) # Tablet only screen and (min-width: 768px) # Desktop only screen and (min-width: 992px) # Huge only screen and (min-width: 1280px) 要么： # Phone only screen and (max-width:320px) # Tablet only screen and (min-width:321px) and (max-width:768px) # Desktop only screen and (min-width:769px) 你认为这些“断点”应该用于每个设备？