标签: media-queries

我正在尝试使用CSS媒体查询,专门针对iPhone.

当我使用常规链接rel时它可以工作:

<link rel="stylesheet" type="text/css" href="css/mobile.css" />

但是,当我尝试此媒体查询时,它不起作用:

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

如何使用CSS媒体查询来定位iPhone？

可能重复:
移动网络的max-device-width和max-width之间有什么区别？

例如,这个网站:

http://8faces.com/使用max-width.

本教程使用max-device-width:

例:

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

他们之间有什么区别？他们在Android,iOS,iPad等工作吗？

我正在建立一个响应式设计的网站.我需要区分横向模式下的平板电脑和带有媒体查询的桌面之间的布局.这些是媒体查询:

<link href="base.css" rel="stylesheet"/>
<link href="desktop.css" 
media="only screen and (min-width: 801px)" rel="stylesheet"/>
<link href="tablet.css" 
media="only screen and (min-width: 629px) and (max-width: 800px) and 
(orientation:portrait), 
only screen and (min-height:629px) and (max-height:800px) and 
(orientation:landscape)" rel="stylesheet"/>

desktop.css在横向模式下,平板电脑包含问题.iPad在风景中很1024px广泛,这是PC的常见解决方案.如何通过媒体查询将1000px横向模式中的宽dekstop与平板电脑区分开来？

PS我必须使用媒体查询,因为网站将被缓存/ CDNed等.任何服务器端检测都不起作用.

PS2.

<link href="desktop.css" 
media="only screen and (min-width: 801px), 
not only screen and (min-height:629px) and (max-height:800px) and 
(orientation:landscape)" rel="stylesheet"/>

没有解决问题.

我想知道媒体查询的最大宽度是否与视口大小或窗口大小有关？

例如,我有这个媒体查询:

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

当视口大小为360px或窗口大小为360px时,此媒体查询是否会生效？

有没有办法让HTML文件根据媒体属性使用不同的样式表？我知道该link方法采用媒体类型,但我发现的所有引用仅指示媒体类型,而不是扩展查询.我也不确定如何确保只选择一个,以及哪一个.

基本上在我目前的CSS文件中,我有一个像这样的媒体部分(简化仅供参考):

@media (min-device-pixel-ratio: 1.5) {
  specific-media-rules
}

我想要的是,不是让这个部分和其他媒体非常类似的部分是为两个不同的文件提供服务.

所以我有一个有趣的困境,我在一个响应式网站上工作,当我调整浏览器的大小时,一切正常,但是当我从我的iphone查看网站时,它并没有抓住来自相应媒体查询的查询,我定义为:

@media (max-width: 479px) {
  rules
}

该网站是ericbrockmanwebsites.com/dev2想知道是否有人曾经遇到过这个问题.

任何帮助是极大的赞赏.

我很迷惑.我试图通过播放媒体查询来使网站响应.

根据大多数来源,例如此,所述MEDIQ查询使用的智能手机是max-device-width: 480px和min-device-width: 320px.

但是当我使用这些查询时,我的android 2.x仍然显示该页面的"计算机版本".所以我开始更改查询的值,发现我的手机似乎有980px的设备宽度..

这是为什么？我真的很想掌握这一点,当我使用980时,我确实可以很高兴它的工作,但我想知道发生了什么,为什么？我的意思是我的手机不应该是980px宽或高,这是否是某种像素密度问题？

我知道如何对平板电脑肖像进行媒体查询,为手机查看另一个媒体查询.但是,是否有可能只为所有人提供一个媒体查询:平板电脑肖像和手机？

/* tablets portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (orientation : portrait) { 

}

/* phones */
@media screen and (max-device-width: 640px) { 

}

/* tablets portrait and phones 
Is it possible to have only one media query for this that do the same than the other media queries together?
*/

我正在本地开发我的网站,并使用Chrome进行预览.虽然调整浏览器大小以测试使用的媒体查询非常容易max/min-width,但我无法max/min-device-width通过任何内置设置进行模拟.是否有Chrome扩展程序可以模拟移动设备并触发媒体查询,具体而言max/min-device-width也是如此orientation:portrait/landscape？

我基本上想用某种方法在我的计算机而不是智能手机上使用Chrome测试此媒体查询:
@media only screen and (max-device-width: 600px) and (orientation: portrait)

在Chrome DevTools中，我可以检查元素以查看其CSS和相关的媒体查询：

如您在“ 样式”面板中所见，Chrome通过巧妙地显示了我当前的媒体min-width: 1200px。但是，Chrome当前占用了我计算机的大量内存，因此我必须切换回Firefox，即Firebug。

但是，Firebug错过了媒体查询部分：

Firefox中是否可以显示CSS规则及其当前媒体查询的可能性/扩展性？