借鉴bootstrap的方法，快速实现响应式开发

响应式开发

注意：任何框架都是一个辅助手段，只需借鉴其中的核心思想，把其中核心的东西提炼出来即可。不要因为，提到响应式就想到只能够用bootstrap来实现，框架现有的东西是可以提高我们的效率，但是其内部场景的冗余就很注定只是一种懒人方法，要想攀登高峰，只有一步一步脚印来。然后，不断提炼，实力和技术才能够不断进步。

---

目前项目是响应式开发，虽然会感觉各种节点的冗余，但是谁让咱是个打工仔呢？

周知响应式的开发的基础是媒体查询，就是这玩意@media，正对不同的屏幕尺寸进行的适配就是响应式了。

为在项目上有较好的编码体现，直接套用bootstrap的代码。通过使用这些工具class可以根据屏幕和不同的媒体查询显示或隐藏页面内容，加速针对移动设备的开发。

尝试使用这些class并避免创建同一个网站的不同版本，从而能够完善不同设备上的显示效果。响应式工具目前只是针对块级元素， 不支持inline元素和表格元素。

类名控制如下：

通过单独或联合使用以下列出的class，可以针对不同屏幕尺寸隐藏或显示页面内容。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面 (≥992px)	大屏幕桌面 (≥1200px)
.visible-xs	可见	隐藏	隐藏	隐藏
.visible-sm	隐藏	可见	隐藏	隐藏
.visible-md	隐藏	隐藏	可见	隐藏
.visible-lg	隐藏	隐藏	隐藏	可见
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

样式的抽离

@media值的大小，可以根据公司的适配要求，自己改写

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}
@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table !important;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table !important;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table !important;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table !important;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

那么，要控制元素在超小屏幕和小屏幕下的状态，则可以使用

.yourClassName.visible-xs{
  /*超小屏幕下的样式...*/
}
.yourClassName.visible-sm{
  /*小屏幕下的样式...*/
}

注意 :bootstrap版本是3样式代码

---

## 2017.10.3总结 目前项目上用css是使用面向对象的方式实现的，即`.scss`/`.less`，我们一个模块的样式设计就是一个最外层一个盒子，只有一个节点。类似于下面的形式：

```less .feature-container{ >.a{ // .a样式描述 >.b{ // .b 样式描述 // .c .d. ... } } } ``` 这样的书写形式具有dom的树状结构，和方便开发与排错以及后期的维护。（然而，项目上是没有很好的约束，我感觉是一个败笔）一个盒子的所有样式规则是嵌入的形式。我们最期待的形式就是在某个位置上能够全部搞定这个部分的样式，不要到处乱写，很没有把空性。但是，因为@media这个玩意，在css之中，前面的是不可以有层级关系，不能有那种父子选择器、后代选择器的那种东西。这就很尴尬了，这与我们之前的代码优雅的观念很矛盾。

---

我们知道，我们写css常常会有一些技巧，比如将子代的通用可继承的样式会在dom树上提升，直接给这类子元素的祖先设置即可。同类设置，是一个技巧。

市面上，有很多公司pc和移动端都没有通过响应式来实现的。其中很重要的一项就是因为，样式的文件的不方便管理。那么，我现在提出的解决方案就是以`@media`来区分终端大小，实现不同尺寸的设备，达到需求。 `重点：`@media之后的各个尺寸的设置，需要和一般样式的设置一样，和dom树结构一样，保持一致，这样才算优雅。 具体如下： ```less .feature-container{ // 不同尺寸设备的通用样式设定 } @media (min-width:500px){ // >500px尺寸的设备的独有样式 } @media (max-width:500px){ // < 500px 尺寸设备的独有样式 } ```

是不是很优雅，设计得蛮巧妙？未经允许，不让转。