Css 移动HTML5应用程序的媒体查询

我基本上是疯了，想通过谷歌找到答案。iOS设备不是一个问题，因为没有那么多，而且很容易为每一个设备设置，但是android和可能的黑莓进入了游戏

基本上我有4种尺寸（S、M、L、XL）的CSS，但后来出现了一款类似“HTC One”的手机，它有全高清（1920x1080）和4.7英寸。。。这个怎么算？是否有一个覆盖大多数框架的框架。我该怎么做？如何覆盖大多数设备

干杯，

---

K

嗯，我可以说我个人处理这件事的方式是这样的：

<link rel="stylesheet" href="./css/base.css" type="text/css" media="all">
<link rel="stylesheet" href="./css/720_grid.css" type="text/css" media="screen and (min-width: 720px)">
<link rel="stylesheet" href="./css/986_grid.css" type="text/css" media="screen and (min-width: 986px)">
<link rel="stylesheet" href="./css/1236_grid.css" media="screen and (min-width: 1236px)" >

所以我基本上有三个CSS文件，根据屏幕的宽度，每个文件都会自动加载。最后一个适用于1236或更高版本

---

这就是你要找的。。。还是我遗漏了您的问题？

在媒体查询中，您可以使用

max device width

而不是

max width

max width

将以支持媒体查询的任何内容为目标，但

max device width

将以屏幕而不是窗口为目标。 “描述输出设备的宽度（指整个屏幕或页面，而不仅仅是呈现区域，如文档窗口）。”*来源：

或者，如果您知道解决方案，您可以将它们结合起来：

@media screen and (min-resolution: 2dppx) and (max-device-width:1920px) { ... }

---

好吧，我认为为每种尺寸的屏幕创建一个特殊的css样式表与“响应性设计”therms并不完全匹配。然后你应该首先根据最大的屏幕为你的网站创建一个css，或者从最小的屏幕开始（移动优先）你的网站将与之一起使用。然后您只需在css中添加一个媒体查询块，如下所示：

@media all和（最大宽度：*屏幕大小*px）{*您的css在这里*}

每次他看起来怪异或统一时都要改变一个元素

使用此技巧，还可以使用视口元标记

，该标记将禁用用户缩放功能，并自动调整窗口，以便在每个屏幕上完美地调整站点（即使是智能手机）

我甚至不知道它是否真的能帮到你，但我认为重要的是，标记为特定大小制作特定样式表并不是好方法，因为有一百万种不同的屏幕大小

然后还可以使用css网格，如或

---

查看此处了解更多信息：

我了解你，卡林顿

不要处理其他复杂的即时CSS和JS文件。您可以根据需要创建自己的网站

使用以下媒体查询：

设计你的网站

然后在此链接上逐步检查您的流程：

这是一个我用一天时间设计的网页，有两个链接：

我希望这两个链接将对您有所帮助。

是否可能用于检测浏览器，然后用于确定屏幕分辨率

或者，你可以使用媒体查询来实现你想要的

• 在上面的评论中也提到了这篇文章

---

您好，谢谢您的评论，但我需要的是同时具有屏幕大小和DPI的移动设备。。。我认为这个解决方案只适用于具有类似DPI的桌面屏幕。正如我上面所说，“但是后来出现了一款像“HTC One”这样的手机，它有全高清（1920x1080）和4.7英寸”，在你的例子中，如果他想使用“1236_grid.css”，他会得到非常微小的元素……@Charlie74：这是一种非常糟糕的使用媒体查询的方式！首先，因为在不同的文件中分离样式将导致额外的请求，因为浏览器将加载所有CSS文件（不仅仅是根据其规则匹配的CSS文件）。其次，仅使用

minwidth

会导致应用（并覆盖）所有样式，这可能会导致浏览器在您的情况下重新呈现页面多达四次。这两件事都应该绝对避免，尤其是对于移动设备！最后但并非最不重要的一点是，对于媒体查询规则，应该使用EMs而不是像素。@Charlie74和Netsurfer。媒体查询可以在标题中使用，因此只加载一个css文件。调整浏览器窗口的大小会带来负面影响，但除了开发人员会多次检查网站的响应性之外。您可以在媒体查询中使用

-webkit-min-device-pixel ratio

和

min-resolution

，以高分辨率设备为目标。请看这里：您可以在这里找到您的问题的适当答案：+1提及Twitter引导和960网格系统，依赖CSS框架比使用自己的框架更好。不过我不想看你的第一段。至于第二段，最好不要提及最大比例，这样用户可以在出于某种原因需要文本变大时放大。不过，初始规模是必须的

@media screen and (min-resolution: 2dppx) and (max-device-width:1920px) { ... }