SCSS实现响应式布局

参考文章

• 比较简单的分栏响应式布局
• 实例演示
• 官方文档
• 中文文档

• map函数详解

• 我的github实现地址

代码演示

• alpha1.0 当要完成响应式布局时，纯手写方法一般是如下，缺点是，如果要修改断点，或者修改属性值的时候，全部要手动修改，如果代码是比较杂乱的会显得，并不够优秀。所以，就有了第一种用scss实现的方式。

 @media screen and (min-width: 480px) {
    p {
   font-size:26px;}
    h1 {
   font-size:40px;}
 }
 @media screen and (min-width: 320px) {
    p {
   font-size:18px;}
    h1 {
   font-size:30px;}
 }

这种方式给所需要的断点对应的值组织一个list，通过@each遍历，很容易就完成简单的响应式布局

$h1List:(
  'null' : 10px,
  '480px':