在研究响应式的时候，记录了一些感想，分享出来，抛砖引玉，希望可以和大家一起讨论。总结下来，响应式比之前想象的要复杂得多。 At the time of the reactive, recorded some thoughts, to share, topic and hope can discuss with you. Summary and response type is much more complex than previously thought. 1. ie9以下（不包括ie9）采用ie条件注释，为ie8以及一下单独开一个样式文件 1. Internet explorer 9 the following (not including ie 9) using conditional comments, ie for ie8 open a style as well as a separate file 2. 一个模块的mq样式整体放在这个模块的样式的之后，符合层叠逻辑，也同时以免被层叠。 2. A module of mq style as a whole in the style of this module, in line with the cascade logic, at the same time to avoid the cascade. 3. 祈求在一个相应点上同时做变化几乎是不可能的，因为版式中间的变化，无论是视觉还是具体的编码人员不可能掌握所有细节。 3. Pray at a corresponding point do change at the same time it is almost impossible, because the format in the middle of the change, whether visual or specific coder can't grasp all the details. 4. 流体布局很关键，%视父级为参照物，这一点虽然很多人都知道，但是实际做的时候却最容易被忽略。 4. The fluid is key layout, % parent as reference, that although a lot of people know, but actually do is the most easy to be ignored. 5. 清除浮动也很重要，切记。 5. Remove the floating is also very important, remember. 6. 如果你希望边框、边距（内、外）也在100%的范围内，直接设置width:auto就好了，不要给予希望在新的css3属性上，也不要寄希望在-webkit上，-webkit-很容易就会变成下一个ie6了。 6. If you want the borders, margins (internal and external) are in the 100% range, directly set width: auto, don't give hope on the new range of attributes, also do not hope on - its, its - it would be easy to become the next ie6. 7. 合理的嵌套更加健壮，用一个包装元素来替代设置当前元素margin或者padding。举例，假如有A和B两个元素，width是40%，maring-right是10%，这样很容易在搜索浏览器的时候篡位，所以用一个包装元素C去分别包裹A和B，然给给C设置50%，A和B分别设置为80%。这样就是合理且健壮的嵌套了。 7. Reasonable nested more robust, with a wrapper element to replace the current element margin or padding. For example, if there is A and B two elements, width is 40%, maring u-right is 10%, so it is easy to search browser usurper, so use A packing element C to package A and B, respectively, but to set 50% C, A and B respectively set to 80%. This is the reasonable and strong nested. 8. 两行两列这种设计，由于流体布局和字数的不同，所以为每一行添加一个包装元素，更加健壮。也就是说，先做两行，再在每一行里做两列。 8. Two lines of two columns of the design, due to the different fluid layout and word, so add a packing element for each row, more robust. That is to say, do first two lines, then do two column in each row. 9. 不要奢望在在每一个像素的宽度上不会出现超出预期的表现，因为没有任何人知道页面在每一个像素宽度时候的表现的样子，页面越负责可预期的就越不准确。所以mq可能真的是“非预期数值”（预期数值指代在设计和实现之前约定的响应点） 9. Don't expect in each pixel width will not appear on more than expected, because no one know page at each pixel width, the performance of the page, the more inaccurate is responsible for the more predictable. Mq could really is so "unexpected numerical" (expected value refers to the response of the point before the design and implementation agreement) 10. 相同区间的mq和mq会层叠，全局的样式也会和mq中的样式层叠，所以属性尽量不要写成缩写。以减少忘记的风险。 10. The same range of mq and mq will cascade, global style will and mq in cascading style, so try to don't write abbreviations properties. To reduce the risk of forgetting. 11. 图片的自适应处理不容易，特别是有边框的，如果正常条件（没有利用mq来约束）下设置了宽和高，在另外一个mq下，仅仅设置一个属性是不行的，还是那句话，mq不是二选一（除非是两个不同的mq区间），而是层叠！！ 11. Image adaptive processing is not easy, especially have borders, if under normal conditions (no use mq to constraints) set the width and height, in another mq, just setting an attribute is not enough, or that sentence, mq is not a choice (unless they are two different mq interval), but the cascading!!!!! 12. 如果水平列表的两端的元素两端对齐，以四个元素为例，那么除了前三个预留左边距，最后一个为零；或者第一个右边据为0；后三个有右边距以外。可以采用第一个左侧有，最后一个右侧有，中间两个左右偏移边距来做，短的一面为 边距除以空白数，比如4个列表项，边距为40,则40除以3。好处么？就是可以保证每一个外包装为通栏的25%。 12. If the horizontal alignment on both ends of the elements, at the ends of the list of four elements, for example, so in addition to the first three reserve left, the last one is zero; Or according to the first right to 0; Having the right margin after three. Can take the first left, the last one on the right, about the middle two offset margin, short side for margin divided by the number of blank, such as 4 list item, the margin is 40, 40, divided by 3. The benefits? Is to ensure every packaging 25% of the banner. 13. 四个25%，两个50% 没关系，但是50% 25% 25%就可能会掉下去最后一个，所以24.99，22.49有时还会相差1~2像素。 13. 25%, four two 50% it doesn't matter, but 50% 25% 25% could fall off the last, so 24.99, 22.49 sometimes differ 1 ~ 2 pixels. 14. 如果版式变化不大，那么从大到小的写mq，不必写一个区间，只写最大值即可，这样一层一层的继承，小尺寸继承大尺寸，另外，不用过分担心选择器本身权重的问题，mq会提高其优先级。 14. If the format change is not big, from big to small write mq, don't need to write an interval, you just write a maximum, so one layer of inheritance, inherit the large size, small size also, don't have to worry about the weight of the selector itself, mq can raise its priority. 15. 像导航和版权这种在pc、pad、phone截然不同的版式。mq，就写区间。这样在区间外就等于这些dom毫无样式，这样就不比担心由继承引发的覆盖、优先级、重写以及未知问题。减少了属性的重写，提高了效率、降低了修改成本。其实就是等于一个dom，为不同的设备写不同的样式，这些样式之间不继承。 15. In the PC, pad, such as navigation and copyright phone different format. Mq, just write range. So no style outside the interval is equal to the dom, so it is no worry about coverage caused by inheritance, priority, rewriting and unknown problems. Reduce the attributes of rewriting, to enhance the efficiency and reduce the cost changes. Is equal to a dom, write different styles for different devices, these styles are not inherited. 16. 如果你希望几个元素是相对位置不变的话，请将他们包裹，通过这个包裹元素使他们整体与其他元素或元素组做排版，所以一个健壮的响应式离不开这些看似“冗余”的包裹元素。但还是以最少的可实现目标的dom层级为目标。 16. If you want a few elements are relative position unchanged, please wrap them, through this package elements to make them as a whole with other elements or elements groups do typesetting, so a robust response type without these seemingly "redundant" package elements. But with minimal can achieve the goal of dom level as the goal. 17. 关于背景图，以中心为原点进行“裁剪”是理智的，已某一侧为原点看起来都有点怪。另外可以使用background-size某个值为auto，另外一个使用% 17. The background, in order to center "utting out" is the reason for the origin, has one side to the origin seem a bit strange. Also can use the background - size some value for auto, another use % 18. 大图片请写在一个mq区间内，不要只写最大值，这样会搞定按需加载的问题。 18. The big picture, please write in a mq interval, don't just write a maximum, this will fix on demand loading problem.