小编And*_*aus的帖子

我正在使用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"> …

在我的网站项目中,我使用媒体查询和第n个子选择器.

IE8不支持开箱即用,但有多种填充物可以帮助:

• Respond.js,mediatizr或css3-mediaqueries.js在IE8中启用媒体查询;
• selectivizr或ie9.js启用第n个子选择器.

我的问题是我需要在媒体查询中使用nth-child.一个合成的例子:

@media (min-width: 500px) {
  .foo:nth-child(2n) {
    color: pink;
  }
}

我需要这个代码在IE8中工作.

问题在于,selectivizr和ie9.js都没有nth-child在媒体查询中解析,并且支持媒体查询的polyfill也无济于事,因为它们nth-child在一起使用时会干扰polyfill.

请建议一种方法,使该代码在IE8中工作!

我有一个包含之类的东西几个模块border-radius,$btnBgColor,up-arrow.

大多数其他模块需要import在一个地方或另一个地方,所以我想知道我是否可以import在SCSS编译器级别使用它们,以便我可以使用这些常用实用程序,就好像它们是内置的.

我使用的SCSS实现是pyscss.该Scss编译器的构造函数接受一个scss_files参数,我认为可以用来预先进口一些文件,所以我想是这样的:

  compiler = scss.Scss(scss_files={path: source})
  compiler.compile("a { background: $btnBgColor; }")

哪个没用.

创建由数字中的数字组成的数组的最短方法是什么？

我不想恢复声明一个空数组,然后通过for(a,b,c)循环遍历数字.

我想要一些更具说服力的东西.理想情况下,例如:

Array.from(143) // => [1, 4, 3]