在研究響應(yīng)式的時(shí)候，記錄了一些感想，分享出來(lái)，拋磚引玉，希望可以和大家一起討論。總結(jié)下來(lái)，響應(yīng)式比之前想象的要復(fù)雜得多。 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以及一下單獨(dú)開(kāi)一個(gè)樣式文件 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. 一個(gè)模塊的mq樣式整體放在這個(gè)模塊的樣式的之后，符合層疊邏輯，也同時(shí)以免被層疊。 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. 祈求在一個(gè)相應(yīng)點(diǎn)上同時(shí)做變化幾乎是不可能的，因?yàn)榘媸街虚g的變化，無(wú)論是視覺(jué)還是具體的編碼人員不可能掌握所有細(xì)節(jié)。 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. 流體布局很關(guān)鍵，%視父級(jí)為參照物，這一點(diǎn)雖然很多人都知道，但是實(shí)際做的時(shí)候卻最容易被忽略。 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. 清除浮動(dòng)也很重要，切記。 5. Remove the floating is also very important, remember. 6. 如果你希望邊框、邊距（內(nèi)、外）也在100%的范圍內(nèi)，直接設(shè)置width:auto就好了，不要給予希望在新的css3屬性上，也不要寄希望在-webkit上，-webkit-很容易就會(huì)變成下一個(gè)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. 合理的嵌套更加健壯，用一個(gè)包裝元素來(lái)替代設(shè)置當(dāng)前元素margin或者padding。舉例，假如有A和B兩個(gè)元素，width是40%，maring-right是10%，這樣很容易在搜索瀏覽器的時(shí)候篡位，所以用一個(gè)包裝元素C去分別包裹A和B，然給給C設(shè)置50%，A和B分別設(shè)置為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. 兩行兩列這種設(shè)計(jì)，由于流體布局和字?jǐn)?shù)的不同，所以為每一行添加一個(gè)包裝元素，更加健壯。也就是說(shuō)，先做兩行，再在每一行里做兩列。 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. 不要奢望在在每一個(gè)像素的寬度上不會(huì)出現(xiàn)超出預(yù)期的表現(xiàn)，因?yàn)闆](méi)有任何人知道頁(yè)面在每一個(gè)像素寬度時(shí)候的表現(xiàn)的樣子，頁(yè)面越負(fù)責(zé)可預(yù)期的就越不準(zhǔn)確。所以mq可能真的是“非預(yù)期數(shù)值”（預(yù)期數(shù)值指代在設(shè)計(jì)和實(shí)現(xiàn)之前約定的響應(yīng)點(diǎn)） 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. 相同區(qū)間的mq和mq會(huì)層疊，全局的樣式也會(huì)和mq中的樣式層疊，所以屬性盡量不要寫(xiě)成縮寫(xiě)。以減少忘記的風(fēng)險(xiǎn)。 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. 圖片的自適應(yīng)處理不容易，特別是有邊框的，如果正常條件（沒(méi)有利用mq來(lái)約束）下設(shè)置了寬和高，在另外一個(gè)mq下，僅僅設(shè)置一個(gè)屬性是不行的，還是那句話，mq不是二選一（除非是兩個(gè)不同的mq區(qū)間），而是層疊！！ 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. 如果水平列表的兩端的元素兩端對(duì)齊，以四個(gè)元素為例，那么除了前三個(gè)預(yù)留左邊距，最后一個(gè)為零；或者第一個(gè)右邊據(jù)為0；后三個(gè)有右邊距以外?？梢圆捎玫谝粋€(gè)左側(cè)有，最后一個(gè)右側(cè)有，中間兩個(gè)左右偏移邊距來(lái)做，短的一面為 邊距除以空白數(shù)，比如4個(gè)列表項(xiàng)，邊距為40,則40除以3。好處么？就是可以保證每一個(gè)外包裝為通欄的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. 四個(gè)25%，兩個(gè)50% 沒(méi)關(guān)系，但是50% 25% 25%就可能會(huì)掉下去最后一個(gè)，所以24.99，22.49有時(shí)還會(huì)相差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. 如果版式變化不大，那么從大到小的寫(xiě)mq，不必寫(xiě)一個(gè)區(qū)間，只寫(xiě)最大值即可，這樣一層一層的繼承，小尺寸繼承大尺寸，另外，不用過(guò)分擔(dān)心選擇器本身權(quán)重的問(wèn)題，mq會(huì)提高其優(yōu)先級(jí)。 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. 像導(dǎo)航和版權(quán)這種在pc、pad、phone截然不同的版式。mq，就寫(xiě)區(qū)間。這樣在區(qū)間外就等于這些dom毫無(wú)樣式，這樣就不比擔(dān)心由繼承引發(fā)的覆蓋、優(yōu)先級(jí)、重寫(xiě)以及未知問(wèn)題。減少了屬性的重寫(xiě)，提高了效率、降低了修改成本。其實(shí)就是等于一個(gè)dom，為不同的設(shè)備寫(xiě)不同的樣式，這些樣式之間不繼承。 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. 如果你希望幾個(gè)元素是相對(duì)位置不變的話，請(qǐng)將他們包裹，通過(guò)這個(gè)包裹元素使他們整體與其他元素或元素組做排版，所以一個(gè)健壯的響應(yīng)式離不開(kāi)這些看似“冗余”的包裹元素。但還是以最少的可實(shí)現(xiàn)目標(biāo)的dom層級(jí)為目標(biāo)。 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. 關(guān)于背景圖，以中心為原點(diǎn)進(jìn)行“裁剪”是理智的，已某一側(cè)為原點(diǎn)看起來(lái)都有點(diǎn)怪。另外可以使用background-size某個(gè)值為auto，另外一個(gè)使用% 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. 大圖片請(qǐng)寫(xiě)在一個(gè)mq區(qū)間內(nèi)，不要只寫(xiě)最大值，這樣會(huì)搞定按需加載的問(wèn)題。 18. The big picture, please write in a mq interval, don't just write a maximum, this will fix on demand loading problem.