根据不同尺寸的浏览器或移动屏幕动态重新排序图块 [英] Dynamically re-order tiles based on different size browser or mobile screen

问题描述

无论使用什么屏幕来查看页面，我想显示尽可能多的图块。不同的情况包括：

• 移动浏览器（iPhone，Android）


• iPad或Android表格或Kindle火


• 缩小浏览器窗口（safari，chrome，ie，firefox，operta等）


• 全屏浏览器窗口

我想到的一个解决方案是使用 960.gs 和 adaptive.js ...但是，当我设置div的大小，例如：

div class =tile grid_4

我注意到adaptive.js会调整图块的大小（因为不同的.css文件调整列的大小）...但是，我需要保持固定的图块大小（310px X 450px）....

也许我需要动态重命名div类，使列数x col width = 310px？

这样做的一个网站是。我建议您阅读A List Apart关于 响应式网页设计的精彩文章。

在您完成基本操作之后，您可以使用 device-width 查询。要定位高密度显示器（例如iPhone4的视网膜显示器），您可以查看 device-pixel-ratio 查询。

希望这有帮助。

Whatever screen is being used to view the page, I would like to show as many tiles as possible. Different scenarios include:

• Mobile browswer (iPhone, Android)
• iPad or Android Table or Kindle Fire
• Narrow Browser window (safari, chrome, ie, firefox, operta, etc)
• Full screen Browser window

One solution I thought of was to use 960.gs and adaptive.js ... however, when I set the size of the div, for example:

div class="tile grid_4"

I noticed that adaptive.js would resize the tile (becase the different .css files resize the columns)... However, I need to keep a fixed tile size (310px X 450px)....

Perhaps I need to dynamically rename the div class so that the # of columns x col width = 310px?

One site that does this is http://pinterest.com

And to see what each tile looks like, please check out http://jsfiddle.net/hagope/76jjp/

解决方案

Have a look at CSS3 media queries. I recommend you read A List Apart's fantastic article on Responsive Web Design, which covers the subject and is a good starting point.

After you've got the basics sorted, you can target specific devices using the device-width query. To target high-density displays (e.g. the iPhone4's retina display) you can look into the device-pixel-ratio query.

Hope this helps.

这篇关于根据不同尺寸的浏览器或移动屏幕动态重新排序图块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！