相关疑难解决方法(0)

我正在使用Susy.

我没有利用内容优先的方法,并决定首先使用window-px-widths

起初我尝试了内容优先的网格方法,但很快我发现我的网站在不同的设备上出现意外行为.它会显示一个移动布局,我想要一个平板电脑布局等.我最终调整了Susy设置的em值,以匹配某些屏幕宽度(px值).代码变得丑陋,我意识到我实际上并没有实际使用内容优先方法.

这是我使用这种错误方法创建的站点主页的静态快照及其代码的快照.

所以我决定完全转储内容优先方法并首先使用px值.

在编写代码之前,我为我的网格制定了要求

首先,我根据屏幕尺寸对不同设备进行了分组.然后我想出了最适合这些设备组的断点的px值:

Break-    Layout   Number of            Common
points     name     columns             usage
(px)               (sample)

    0  ?
       ?
       ?     S        1       Smartphones-portrait, old phones
       ?
   400 ?
       ?     M        2       Smartphones-landscape
   600 ?
       ?     L        3       Tablets-portrait
   800 ?
       ?     XL       4       Tablets-landscape, netbooks
  1000 ?
       ?    XXL       5       Laptops, desktop computers
  1200 ?
       ?

我想以下假设/要求:

1. Window-px-widths-first方法(如上所述).

2. $ container-style是流动的.当屏幕宽度介于两个断点之间时,容器的宽度会自动调整以匹配较大的断点.布局中的列数不会更改,并且对应于较低的断点.

3. 最后一个断点是容器的最大宽度.该网站将不会进一步延伸,它将有额外的排水沟.

4. 移动先行.从"S"布局开始,并在屏幕变宽时用其他布局覆盖它.

经过深思熟虑,我的方法演变为以下代码

(这段代码是一个合成的例子.我从我的实际代码中摘录并进行了一些调整,因此可能会遗漏某些内容或存在不一致之处.)

<div id="header-wrapper"> …