响应式开发
注意：任何框架都是一个辅助手段，只需借鉴其中的核心思想，把其中核心的东西提炼出来即可。不要因为，提到响应式就想到只能够用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，我们一个模块的样式设计就是一个最外层一个盒子，只有一个节点。类似于下面的形式：
.feature-container{ >.a{ // .a样式描述 >.b{ // .b 样式描述 // .c .d. ... } } } 这样的书写形式具有dom的树状结构，和方便开发与排错以及后期的维护。（然而，项目上是没有很好的约束，我感觉是一个败笔）一个盒子的所有样式规则是嵌入的形式。我们最期待的形式就是在某个位置上能够全部搞定这个部分的样式，不要到处乱写，很没有把空性。但是，因为@media这个玩意，在css之中，前面的是不可以有层级关系，不能有那种父子选择器、后代选择器的那种东西。这就很尴尬了，这与我们之前的代码优雅的观念很矛盾。
我们知道，我们写css常常会有一些技巧，比如将子代的通用可继承的样式会在dom树上提升，直接给这类子元素的祖先设置即可。同类设置，是一个技巧。 市面上，有很多公司pc和移动端都没有通过响应式来实现的。其中很重要的一项就是因为，样式的文件的不方便管理。那么，我现在提出的解决方案就是以
@media来区分终端大小，实现不同尺寸的设备，达到需求。 重点：@media之后的各个尺寸的设置，需要和一般样式的设置一样，和dom树结构一样，保持一致，这样才算优雅。 具体如下： .feature-container{ // 不同尺寸设备的通用样式设定}@media (min-width:500px){ // >500px尺寸的设备的独有样式}@media (max-width:500px){ // < 500px 尺寸设备的独有样式} 是不是很优雅，设计得蛮巧妙？未经允许，不让转。