1

我正在做一个项目，我们已经做了响应式设计并使用媒体查询。现在我阅读了 Aaron Gustavson 的Adaptive Web Design 、Ben Frain 的 Responsive Web Design with HTML5 and CSS3和其他在线网站。这是一件事，我仍然有点不确定我是怎么走的，那就是媒体查询我选择的宽度。

我们决定使用 twitter bootstrap 样式（不使用它），它会卡入到位，而不是让它流动。

3 种类型
的手机 - 尺寸？
平板电脑 - 980 像素（横向和纵向
屏幕 - 1160 像素

我的问题是我应该使用哪些媒体查询来解决这个问题？我真的很感激帮助，这对我来说是最困难的部分之一。

4

3 回答 3

2

LESS 框架和Twitter Bootstrap都采用了有趣的方法。

LESSframework 针对 4 种模式：

  • 大 - 992px w +
  • 平板电脑 - 768px w
  • 移动 1 - 480 像素宽
  • 移动 2 - 320 像素宽

Twitter Bootstrap 有五个目标：

  • 大 - 1200px w +
  • 大 - 980px w
  • 平板电脑 - 768px w
  • 移动 1 - 480-767px w
  • 移动 2 - < 480 像素宽

我建议使用其中一个（或另一个）响应式 CSS 框架和/或 LESS/SASS 来实现您想要做的事情。

于 2012-07-11T10:08:54.180 回答
0

您可以使用自定义媒体查询，但作为标准设备媒体查询，请参阅此链接：

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

于 2012-07-11T09:46:50.313 回答
0

对媒体查询采取与设备无关的方法：

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

定位一系列视口，并通过响应式设计让您的布局拉伸或收缩以填充空间。

具有不同视口的设备源源不断地进入市场。瞄准特定维度是一场失败的游戏，使用视口范围的更通用的方法是一个很好的策略。

于 2012-07-11T13:40:31.903 回答