我未能利用内容优先方法并决定转到window-px-widths-first

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

以下是我使用此错误方法创建的网站的static snapshot of the homepage及其code的快照。

所以我决定完全转储内容优先方法并首先使用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 ┼
       ↓

我认为以下假设/要求：

Window-px-widths-first方法（如上所述）。
$ container-style很流畅。当屏幕宽度介于两个断点之间时，容器的宽度会自动调整以匹配较大的断点。布局中的列数不会更改，并且对应于较低的断点。
最后一个断点是容器的最大宽度。该网站不会进一步拉伸，而是会有额外的排水沟。
移动一。从“S”布局开始，随着屏幕变宽，用其他布局覆盖它。

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

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

<div id="header-wrapper">
  <header id="header">
    ...
  </header>
</div>

<div id="main-wrapper">
  <div id="main">

    <article id="content">...</article>
    <aside id="sidebar">...</aside>

  </div>
</div>

<div id="footer-wrapper">
  <footer id="footer">
    ...
  </footer>
</div>

/////////////
// Variables
/////////////

$development: true // This enables susy-grid-backgrounds and outlines

// Breakpoints
$bp-s-m:    400px
$bp-m-l:    600px
$bp-l-xl:   800px
$bp-xl-xxl: 1000px
$max-width: 1200px

// Columns
$cols-s:   1
$cols-m:   2
$cols-l:   3
$cols-xl:  4
$cols-xxl: 5

// Layouts
// $layout-s is not necessary due to a mobile-first approach
$layout-m:    $bp-s-m     $cols-m
$layout-l:    $bp-m-l     $cols-l
$layout-xl:   $bp-l-xl    $cols-xl
$layout-xxl:  $bp-xl-xxl  $cols-xxl

// Default grid settings
$total-columns:   $cols-s
$column-width:    85%
$gutter-width:    100% - $column-width
$grid-padding:    1em
$container-width: 100%
$container-style: fluid
+border-box-sizing


/////////////
// Mixins
/////////////

// A couple of mixins to open the developer's third eye
=dev-outline
  @if $development
    outline: 1px solid red
=dev-grid-bg
  +dev-outline
  @if $development
    +susy-grid-background

// A custom container declaration
=standard-container
  +container // ← An actual line of Susy code, yay! :D
             //  This whole post is actualy an attempt to make use of it.
  max-width: $max-width
  +dev-grid-bg

  +at-breakpoint($layout-m)
    +set-container-width
    +dev-grid-bg

  +at-breakpoint($layout-l)
    +set-container-width
    +dev-grid-bg

  +at-breakpoint($layout-xl)
    +set-container-width
    +dev-grid-bg

  +at-breakpoint($layout-xxl)
    +set-container-width
    +dev-grid-bg


/////////////
// Backgrounds
/////////////

// The wrapper divs are necessary for screen-wide backgrounds
html
  background: url('../images/main-background.png') // also repeat, color, this kind of stuff

#header-wrapper
  background: url('../images/header-background.png') 

#footer-wrapper
  background: url('../images/footer-background.png')


/////////////
// Containers
/////////////

// Actually declared in separate SASS files
#header, #main, #footer
  +my-container


/////////////
// Columns
/////////////

// An example of declaring columns
$cols-sidebar: 1
#sidebar-first
  +dev-outline
  +at-breakpoint($layout-l)
    +span-columns($cols-sidebar, $cols-l)

  +at-breakpoint($layout-xl)
    +span-columns($cols-sidebar, $cols-xl)

  +at-breakpoint($layout-xxl)
    +span-columns($cols-sidebar, $cols-xxl)
#content
  +dev-outline
  +at-breakpoint($layout-l)
    +span-columns($cols-l - $cols-sidebar omega, $cols-l)

  +at-breakpoint($layout-xl)
    +span-columns($cols-xl - $cols-sidebar omega, $cols-xl)

  +at-breakpoint($layout-xxl)
    +span-columns($cols-xxl - $cols-sidebar omega, $cols-xxl)

以下是使用此方法和static snapshot of the homepage创建的网站的snapshot of its code。

问题

遵循window-px-widths-first方法是我慎重的决定，并且给出了以下问题。我非常感谢您对内容优先的论点，但请不要仅限于说我错了，请回答以下特定于window-px-widths-first的问题。
我的方法是一种优雅的方式来做窗口px宽度 - 首先使用Susy还是一段丑陋的代码？
如何让我的代码更优雅？

我不喜欢那些我必须为每个容器和每一列重复的断点声明。我只能想到使用为+container指定多个布局的记录不足的可能性。但只要+set-container-width不是我在每个媒体查询中做的唯一代码，即使这个想法也不是一个选择。：（
推荐使用Susy（并满足上述要求）的窗口-px-widths-first的方法是什么？
请说明您找到的代码的任何缺点。我是SASS的新手，我相信你可以提出更有效的方法来做同样的事情。

Answer 1

不错，但有些事情你可以清理。

首先是设置。将Susy用于单个列是没有意义的，因此您可以完全删除小网格，手动创建（只需填充），并使代码更清晰。添加多个列后，您当前的设置没有多大意义。 2列85％，15％的排水沟？这增加了185％的宽度。它有效，因为Susy实际上对数字之间的比率比对数字本身更感兴趣，但它有点难看。我会把它改成例如85px和15px或8.5em和1.5em。因为无论如何你都要覆盖容器，这不应该改变任何东西 - 只是更明智一点。

我要做的另一个主要改变是放弃所有的set-column-width调用，因为你的宽度无论如何都是100％的流体覆盖。它所做的只是每次都设置100％的宽度。何必？有了这个，我想你可以通过断点的简单循环自动化dev-background调用。

$layouts: $layout-m $layout-l $layout-xl $layout-xxl
@each $layout in $layouts
  +at-breakpoint($layout)
    +dev-grid-bg

创建一个在不同断点处更改列跨度的快捷方式在您或我们的端点上很难，并且会增加相当多的输出膨胀，除非这实际上是您正在进行的唯一更改每个尺寸。你现在看起来很好。

Susy：为给定的屏幕宽度（断点px值）创建一个网格，而不知道单个列的宽度（非内容优先方法）

我未能利用内容优先方法并决定转到window-px-widths-first

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

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

问题

1 个答案: