如何做一个专业的回应型网站？

让响应式网站制作变得简单！今天主要介绍一些制作响应式网站的方法。如果你想给自己做一个有回应的网站，试试这些方法！

1.ie9以下(不包括ie9)应采用ie条件注释，并应为ie8及以下版本打开单独的样式文件。

！-[如果lt IE 9]

link href=' lt9 . CSS ' type=' text/CSS '

！[endif] -

2.一个模块的mq风格作为一个整体放在这个模块的风格后面，符合堆叠逻辑，避免同时被堆叠。

3.在一个对应的点上同时祈祷改变几乎是不可能的，因为无论是视觉上还是具体的编码者，都不可能在布局中间就掌握改变的所有细节。

4.流体布局很关键，10%以母体为参照。虽然很多人都知道这一点，但在实践中最容易被忽视。

5.记住，清除浮动也很重要。

6.如果您希望边框和边距(内侧和外侧)在100%以内，只需直接设置宽度：自动。不要寄希望于新的css3属性，也不要寄希望于-webkit，它很容易成为下一个ie6。

7.合理的嵌套更加健壮，并且使用了一个打包元素，而不是设置当前元素的边距或填充。例如，如果有两个元素A和B，宽度为40%，右对齐为10%，那么在搜索浏览器时很容易篡夺位置。所以用一个包装元素C分别包裹A和B，但是C设置为50%，A和B分别设置为80%。这是一个合理而稳健的嵌套。

8.两行两列的设计因为流体布局和字数的不同，更加稳健。也就是说先做两行，然后每行做两列。

9.不要期望在每个像素宽度上的性能都不会超出预期，因为没有人知道页面在每个像素宽度上的性能，越负责任的页面越不准确可以预期。因此，mq可能真的是一个“意想不到的值”(期望值是指在设计和实现之前商定的响应点)

10.相同间隔中的mq和mq将被堆叠，全局样式将与mq中的样式堆叠，因此尽量不要为属性编写缩写。减少遗忘的风险。

11.图片的自适应处理并不容易，尤其是有边框的图片。如果宽度和高度是在正常条件下设置的(没有mq约束)，就不可能在另一个mq下只设置一个属性。同样，mq不是两个之一(除非是两个不同的mq间隔)，而是堆叠的！

12.如果横排两端的元素两端对齐，以四个元素为例，那么除了前三个预留的左边距外，最后一个为零；或者第一个右数据为0；最后三个在右边距之外。您可以使用第一个左边距、最后一个右边距以及中间两个左右偏移边距。短边是边距除以空格数。例如，如果有4个边距为40的列表项，则40除以3。好吃吗？也就是可以保证每个外包装是整个立柱的25%。

13.四个25%，两个50%不重要，但是50%，25%，25%可能会掉最后一个，所以有时候24.99和22.49的差别是1~2个像素。

14.如果布局变化不大，就由大到小写mq，不写区间，只写最大值，让小尺寸一层一层继承大尺寸。另外，不用太担心选择器本身的权重，mq会提高它的优先级。

15.不同的布局，如导航和电脑，平板电脑和手机的版权。Mq，只写区间。这样在区间之外，这些DOM就没有风格了，就不用担心覆盖、优先级、重写以及继承带来的未知问题。减少了属性重写，提高了效率，降低了修改成本。其实相当于一个dom，针对不同的设备写不同的风格，这些风格是不继承的。

16.如果你想让几个元素处于相同的相对位置，请把它们包装起来，通过这个包装好的元素，让它们和其他元素或者元素组一起排版，这样一个健壮的响应就离不开这些看似“多余”的包装好的元素。然而，目标是实现最少的dom级别。

17.至于背景图，以中心为原点“切”是理性的，以某一面为原点似乎有点奇怪。此外，您可以使用背景大小。一个值为自动，另一个值使用%

18.请用一个mq区间写大图，不要只写最大值，这样会解决按需加载的问题。

19.横幅风格练习

@media(最小宽度：1110px){。横幅{ height:684px背景： URL(img/banner 1980 . jpg)center center no-repeat；背景尺寸： auto 100%；}

}/*高度始终是填充的，侧面是裁剪的。这个体验先好*/

/*加载不同目标分辨率的不同图片，确保优秀的K数和一致的裁剪体验*/

@media(最小宽度：769px)和(最大宽度：1110px){。横幅{ height:383pxbackground : URL(img/banner 1110 . jpg)center；}

}

@介质(最小宽度：569px)和(最大宽度：768px){

.banner{height:265px; background:url(img/banner768.jpg) center center;}
}
@media (min-width:415px) and (max-width:568px){
.banner{height:196px; background:url(img/banner568.jpg) center center;}
}
@media (min-width:321px) and (max-width:414px){
.banner{height:143px; background:url(img/banner414.jpg) center center;}
}
@media (max-width:320px){
.banner{height:111px; background:url(img/banner320.jpg) center center;}
}
20. logo如果是在banner的背景图上镂空，这样是不推荐的。在缩小浏览器窗口宽度的时候，给人以很明显很明显的视觉差，感觉页面极其不健壮（至少我的感觉是这样），似乎有随时要散的感觉。文字也有这感觉，特别是有大量文字的时候。所以你会发现很多响应式好的网站，他的导航的底色都是纯色。logo和导航都不镂空在一张背景图上。当然也有少数在的，比如adobe。
21. 接20，一般banner图片几乎是满屏的可能高达1980px；而一般如果是居中的话，我们把导航和logo以及一些小功能，比如登录、搜索控制在1200px最大宽度，当页面大于这个最大宽度的时候，这个区域就像钉在了背景图上，不会导致有两个图层的感觉。所以当页面宽度马上等于最大宽度的时候，我们在利用mq重新写定义下一这个区域的最大宽度，当然是该小一点，这样就解决了20出现的那个问题。
22. png8的问题，ie6下就用纯色做底吧。最理想的想法是，当用ie6访问所有公司web产品的时候，给用户一个页面，先登录QQ帐号，然后下载最新的QQ浏览器，然后发这个用户10个Q币。然后浏览器界就清静了。
23. 接21，当前mq中的这个区域的最大宽度等于下一个（更小的一个尺寸）mq的尺寸，这样就用户的钉在了背景图的上面了。
24. 对于相同的一些元素，某一个有特殊的样式，优先使用nth-of-type选择器。在测试ie8以及一下的时候，再为这个特殊的dom添加一个class之类，然后再在那个ie8以及一下的样式表中书写复制响应的规则。
25. body下有一个包裹元素，作为整体弹性的参照，为ie6、ie7单独写一个宽度，为什么是1000px，由于很难获得使用ie6的用户的分辨率，或者说获取了之后可能因为数据繁多不好决策，所以简单粗暴，认为使用ie6的都是低端设备用户，是小显示器用户，是1024*768分辨率；至于ie7，设置了4个25%的浮动，在缩小浏览器的过程中都能时不时的掉下去一个，对于小数点的像素就自动向上补全，太悲哀了。所以如下：
regular css file
.layout{width:100%; max-width:1980px; min-width:320px;*zoom:1; margin:0 auto;}
lt9 css file
.layout{*width:1000px; min-width:1000px;}/*ie8的最小宽度为1000px，ie7 6只有1000px*/
26. 对于一定要百分之百通栏的模块，比如，带有背景色的版权，或者banner，那么可以在lt9的文件夹里为ie7 6写一个不是只有1000px，而是可以100%的样式，但是切记这里只要有一列，否则就又产生了25中提到的问题，也许，你可以这么写：
lt9 css file
.layout{*width:1000px; min-width:1000px;}/*ie8的最小宽度为1000px，ie7 6只有1000px*/
.one-percent{width:100%;}/*新增的，一定要在layout的后面，否则对于ie6 7不生效*/
html dom
<div>
<!--code-->
</div>
所以建议把banner 主体部分 版权 三者用三个layout包裹，这样便于对ie6 ie7 ie8做样式。
27. 经过长达半年的持续统计，1366px用户最多，根据栅格化，n=24为基准，得出W=(A*n)-i，所以如果要设置最大宽度则设置为1310px；a=45px,i=10px；不过由于与门户和电商等网站的排版不同且主要为了弹性版式，所以这里最大宽度是我们所需要的，至于45px和10px，以后有固定版式的话可以使用。
28. 响应点：1366px 1200px 1110px 768px 568px 414px 320px；768以下的很好理解也方便约束，PC侧的响应点是较难控制的，所以前面三个值基本都是按照版式来操作的。原因参见3。
29. 有的人说写响应式从小往大写，意思是说先写手机端，然后写PC端，大致的原因是从大往小写的话，手机就要层叠和重写很多样式，可能会影响性能。理论上，我是赞成的，实际上我并没有测试过到底性能有多么影响。但是单单从布局的角度上讲，从设计的角度上讲，至少我的逻辑是从大往小写，因为小的基本都是在大的基础上做删减和布局的变化，所以写的时候逻辑比较顺畅。不过无论从大到小，还是从小到大，自己顺手就好。一般视觉都会先设计PC的，然后考虑mobile是什么样的，这一点也使得我是从大到小的去写。
30. 之前黄老师问我，认为响应式的难点是在设计上还是在技术上，我当时说是技术上没什么，关键是版式的变化和设计的体验。现在想想。版式变化固然是难点，但是技术手段也很重要，在这方面的深度和方式的选择要比版式上的选择复杂的多。
31. 响应式三大技术：流体、mq、弹性图片。