标签: media-queries

桌面,平板电脑,笔记本电脑/笔记本电脑,Iphone和智能手机等所有设备最重要的媒体查询宽度是多少？这些设备有任何标准宽度吗？

我想为打印页面的人(media = print)和在手机上浏览的人显示相同的CSS样式集.有没有办法组合CSS媒体查询？

就像是

@media only print or @media only screen and (max-device-width: 480px) {
  #container {
    width: 480px;
  }
} 

我正在开发一个特定于iPad的网站.为了使我的网站在视网膜显示器iPad和旧版iPad上工作,我想在媒体查询中设置LESS CSS中的变量,如:

@media all and (max-width: 768px) {
    @ratio: 1;
}

@media all and (min-width: 769px) {
    @ratio: 2;  
}

因此,当您设置像素的任何内容时,您可以这样做

width: 100px * @ratio;

但我得到一个编译错误,说没有定义@ratio.有可能有一个解决方法使其工作？谢谢.

有没有办法检测是否使用了手持浏览器(iOS/Android手机/平板电脑)？

我试过这个目标是在手持设备上的浏览器中制作一半宽的元素,但它没有什么区别.

width: 600px;
@media handheld { width: 300px; }

可以这样做,如果是这样的话怎么办？

编辑:从我使用的jmaes回答中的引用页面

@media only screen and (max-device-width: 480px).

所以我正在开发我的第一个响应式网站,该网站广泛使用媒体查询.我想知道是否有一些我应该优化的常见页面宽度.

我可能会有一个最大宽度(没有完全流畅)我想我可能有3-5个设置宽度,它们之间有趣的小CSS3过渡(类似于CSS Tricks的工作方式).

目前我使用的数字有些随意:

@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}

另外,我想我已经读过一些移动设备没有按预期运行(有@media).这在哪里发挥作用,我应该如何处理这些情况？

移动屏幕尺寸有很多不同的媒体查询.在设计响应式移动网站时,容纳所有这些内容可能会令人难以招架.在设计移动设备时,哪些是最重要的？我发现这篇文章可以很好地概述可用的媒体查询:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) …

@media screen and (max-width: calc(2000px-1px)) { 
  .col { width: 200px; }
}

减法后的值应该是1999px,但它似乎不起作用.如果我手动将其更改为1999px它工作正常,所以我知道这不是我的CSS的问题.是calc不是媒体查询中支持的,还是我做错了什么？

我有一个表来表示我的html页面中的一些数据.我正在尝试使这个表格具有响应性.我怎样才能做到这一点 ？

这是Demo.

简而言之:

在进行响应式网页设计时,您应该使用一个或多个样式表吗？

详细地:

在响应式设计中,您倾向于拥有一大块CSS,然后在其到达某些断点时调整布局.您可以通过以下两种方式构建代码:

单一样式表

/* 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: 480px)" href="480.css">
<link rel="stylesheet" media="only screen and (min-width: 640px)" href="640.css">
<link rel="stylesheet" media="only screen and (min-width: 800px)" href="800.css">

似乎使用一个样式表将减少HTTP请求的数量,但是您将拥有一个更大的文件,其中包含可能不被某些客户端使用的代码.多个样式表似乎可以保持文件大小不变,但是您有更多的HTTP请求.

你什么时候应该选择每种方法？在实践中,HTTP请求数量和文件大小的优缺点如何？

虽然在谷歌浏览器中测试不同的屏幕分辨率很容易,但我想知道开发人员如何测试以下CSS媒体查询背后的不同设备像素比率.

/* Pixel ratio of 1. Background size is 100% (of a 100px image) */
#header { background: url(header.png); }

/* Pixel ratio of 1.5. Background-size is 1/1.5 = 66.67% (of a 150px image) */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    #header { background: url(headerRatio1_5.png); background-size: 66.67%; }

}

/* Pixel ratio of 2. Background-size is 1/2 = 50% (of a 200px image) */ …