深入理解css 笔记（8）

---

  接下来我们讲下响应式设计，最初开发人员通过创建两个网站来解决这个问题。桌面版和移动版，只是假如要兼容越来越多的设备，比如大屏的平板手机，ipad mini.这时候，强制分开的方案带来就比较多的麻烦，同时也要维护多个网站。

  更好的方式时给所有用户提供一份html和css.通过使用几个关键技术，根据用户浏览器窗口的大小让内容有不一样的渲染结果。只是也需要设计的配合。

  响应式设计有三个原则。1移动优先，这意味着在实现桌面布局之前优先考虑移动版的布局，2@media规则，使用这个样式规则，可以为不同大小的视口定制样式。3流式布局。这种方式允许容器根据视口宽度缩放尺寸。

  移动版有很多限制，屏幕空间受限，网络更慢。用户和网页交互的方式也不一样，可以打字，但是用着很别扭，不能将鼠标移动到元素上触发效果等。

  流式布局，有时候被称作液体布局，指的是使用的容器随窗口宽度而变化。它根固定布局相反，固定布局的列都是用px或者em单位定义。固定容器在小屏上会超出视口范围，导致需要水平滚动条，而流失容器会自动缩小以适应视口。

  img标签有一个srcset属性sourceset的缩写。这个属性是HTML的一个较新的特性。它可以为一个img标签指定不同的图片url，并指定相应分享率。浏览器会根据自身需要决定加载哪一个图片。

  模块化 CSS 是指把页面分割成不同的组成部分，这些组成部分可以在多种上下文中重复使用，并且互相之间没有依赖关系。最终目的是，当我们修改其中一部分 css 时，不会对其他部分产生意料之外的影响。

  开始写模块化样式之前，需要先配置好环境。每个样式表的开头都要歇一歇给整个页面使用的通用规则，模块化 CSS 也不例外。这些规则通常被称为基础样式，其他的样式是构建在这些基础样式之上的。基础样式本身不是模块化的，但它会为后面编写模块化样式打好基础。比如 box-sizing,font-family,基础样式配置完成后，很少会再修改。我们会再基础样式的稳定表现之上，构建模块化 css。

<style>
.message{
  padding 0.8em 1.2em;
  border-radius:0.2em;
  border:1px solid #3655559;
  color:#365559;
  background-color:#e0f0f2;
}
</style>

<div class="message">
Save Success!
</div>

  这个代码和其他css代码差不多。但是这里有很多模块化css的原则。模块的选择器由单个类型构成，这非常重要。选择器里没有其他规则来约束这些样式仅作用再页面的某个地方。比如前面跟一个#sidebar就意味着这个模块只能用在#sidebar元素内部。没有这些约束，模块就可以在任意上下文中重复使用。

  比如一个项目中出现了好几个相似的按钮：.sava-form button ,login-form button ,toolbar .button。样式表里多次出现相同的代码，尽管这并不是完全的复制。重复是为了获得一致的体验，但是随着时间的推移，不同的按钮之间还是发生了一些不一样的改变。有些按钮内边距不同，有的颜色不同。解决方法就是把按钮重构成一个可复用的模块，不受页面位置的限制。创建模块不但可以精简代码，还可以保证视觉一致性。这样看上去更专业，不会给人仓促堆砌的感觉。用户在潜意识里也会更容易相信我们的程序。

  通过定义一个以模块名称的新类名来创建一个修饰符。例如.message-success .message-error。有些喜欢用双连字符来在状态之间。这个是一个叫 BEM的css命名规范流行起来的。也有一些其他的方法。

  在模块中使用选择器例如.body h4来匹配标题元素，这么做是允许的，因为h4就是一个标题，其他例如img li也可以。但是要尽量避免使用基于通用标签类型的匹配，比如div和span.最初建立模块的时候，可能只是span做一件事，但是谁也说不准以后会不会出于其他目的再添加第二个san，后面就比较麻烦了。可能涉及到的都要改一遍。

  有时候，我们需要用一个类对元素做一件简单明确的事，比如让文字居中，让元素浮动，或者清除浮动。这样的类被称为工具类。虽然我不太用。因为一行代码换一个类。不确定是否值得。工具类一般是唯一应该使用important注释的地方。这样的话，不管哪里用到工具类，都可以生效。