HTML列布局取决于屏幕分辨率

Question

我正在寻求一种jQuery或CSS技术，以使网站布局上的列数根据视口的位置而增加或减少。例如，iphone将有1列，800x600将有2，1024x768将有3 ......等等

任何想法？

Answer 1

查看CSS Media Queries

或者，您可以选择Different Stylesheets for Differently Sized Browser Windows

Answer 2

您可以使用媒体查询，jQuery作为Internet Explorer 8或更低版本的后备。

以下是中间分辨率的示例：

@media screen and (min-width: 800px) and (max-width: 1024px) {

    .col1 {.... /* rules go here */ }
    .col2 {.... } /* rules go here */
   }

我注意到那些从未编程的CSS用户在看到嵌套的花括号时往往会惊慌失措，但对于已经编程的人来说，两个级别都没有。

Answer 3

以下是一些解决此问题的项目，并且处于动态css和屏幕尺寸的最前沿：

• 320 and up：

    

  '320 and Up'阻止移动设备   从下载桌面资产   使用小屏幕的样式表作为   它的出发点。

• Lessframework：

    

  Less Framework是一个CSS网格系统   用于设计自适应网站。它   包含4个布局和3套   排版预设，全部基于a   单格。

Answer 4

我看过的文章根据屏幕大小交换文档的样式表。为此，您必须知道需要定位的屏幕结果并为每个屏幕创建样式表。

检查以下网址：h http://www.ilovecolors.com.ar/detect-screen-size-css-style/

Answer 5

如果你使用jQuery -

首先，为您的内容包装器定义一个类，使该页面成为适当的布局数，例如

<div id="page" class="1_column">Content</div>

接下来，您需要一个可以根据

的值更改该包装元素的类的函数

$(window).height(); 
$(window).width();

然后你需要一个对你的函数的事件监听器，它在页面调整大小和页面加载事件

$(window).load(myFunction);
$(window).resize(myFunction);

列最终将留给您的样式表，并且您可以使用display，width和float值在适当的时候将div排列成列。