4

我基本上已经疯了，试图弄清楚/谷歌它。iOS 设备不是问题，因为数量不多，而且每台设备都易于设置，但 android 和可能的黑莓也进入了游戏......

基本上我有 4 种尺寸（S、M、L、XL）的 CSS，但后来出现了一款像“HTC One”这样的手机，它具有全高清 (1920x1080) 和 4.7 英寸......我怎么算这个？有没有像覆盖大多数框架的框架。HJ如何处理这个？我如何覆盖大多数设备？

干杯，K

4

5 回答 5

2

好吧，我认为为每种尺寸的屏幕创建一个特殊的 css 样式表与“响应式设计”therms 不完全匹配。然后，您应该首先根据最大的屏幕为您的网站创建一个 CSS，或者从您的网站将使用的最小（移动优先）开始。然后你只需要像这样在你的css 中添加一个媒体查询@media all and (max-width: *Size of screen*px) { *Your css here* }块： 每次他看起来很奇怪或统一时改变一个元素。

有了这个技巧，还可以使用视口元标记，它会禁用用户的缩放并自动调整窗口以在 每个屏幕（甚至智能手机）<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">上完美地适应您的网站。

我什至不知道它是否真的可以帮助你，但我认为重要的是要标记为特定尺寸制作特定样式表真的不是好方法，因为有一百万种不同的屏幕尺寸。

然后你也可以使用css 网格，比如960 Grid System或Twitter Bootstrap。

在这里查看更多信息：http ://socialdriver.com/2012/06/a-responsive-web-design-tutorial-for-beginners/

于 2013-10-31T12:06:22.847 回答
2

好吧，我可以说我个人处理这个问题的方式是这样的：

<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 或更高版本。

这是你要找的......还是我错过了你的要求？

于 2013-08-21T22:41:58.513 回答
2

在您的媒体查询中，您可以使用max-device-width而不是max-width. max-width将针对支持媒体查询的任何内容，但max-device-width将基于屏幕而不是窗口。“描述输出设备的宽度（指整个屏幕或页面，而不仅仅是渲染区域，比如文档窗口）。” *来源：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

@media all and (max-device-width:1920px){
 /* this will target any device up to 1920px */
}

或者，如果您知道分辨率，则可以将它们组合起来：

@media screen and (min-resolution: 2dppx) and (max-device-width:1920px) { ... }
于 2013-10-29T23:44:47.183 回答
1

可能使用JavaScript检测浏览器，然后使用devicePixelRatio确定屏幕分辨率？

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

于 2013-11-05T05:47:24.453 回答
0

我了解你，卡灵顿，

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

使用这些媒体查询：

网页设计的媒体查询

并设计您的网站。

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

测试您的响应式网页设计

这是我用这两个链接在一天内设计的网页：

土耳其人的彩票查询

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

于 2013-10-31T18:10:10.250 回答