如何制作一个专业的响应式网站

让响应式网站建设变得简单！今天主要介绍一些制作响应式网站的一些办法，假如你想给自己做个响应式网站，可以试一试这类办法！1. ie9以下（不包含ie9）使用ie条件注解，为ie8与一下单独开一个样式文件2. 一个模块的mq样式整体放在这个模块的样式的之后，符合层叠逻辑，也同时以免被层叠。3. 祈求在一个相应点上同时做变化几乎是不可能的，由于版式中间的变化，无论是视觉还是具体的编码职员不可能学会所有细节。4. 流体布局很重要，%视父级为参照物，这一点虽然不少人都了解，但实质做的时候却最易被忽视。5. 清除浮动也非常重要，切记。6. 假如你期望边框、边距（内、外）也在100%的范围内，直接设置width:auto就好了，不要给予期望在新的css3属性上，也不要寄期望在-webkit上，-webkit-比较容易就会变成下一个ie6了。7. 适当的嵌套愈加健壮，用一个包装元素来替代设置目前元素margin或者padding。举例，倘若有A和B两个元素，width是40%，maring-right是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. 像导航和版权这种在pc、pad、phone完全不同的版式。mq，就写区间。如此在区间外就等于这类dom毫无样式，如此就不比担忧由继承引发的覆盖、优先级、重写与未知问题。降低了属性的重写，提升了效率、减少了修改本钱。其实就是等于一个dom，为不一样的设施写不一样的样式，这类样式之间不继承。16. 假如你期望几个元素是相对地方不变的话，请将他们包裹，通过这个包裹元素使他们整体与其他元素或元素组做排版，所以一个健壮的响应式不能离开这类看上去“冗余”的包裹元素。但还是以最少的可达成目的的dom层级为目的。17. 关于背景图，以中心为原点进行“裁剪”是理智的，已某一侧为原点看着都有点怪。另外可以用background-size某个值为auto，另外一个用%18. 大图片请写在一个mq区间内，不要只写大值，如此会解决按需加载的问题。19. banner样式实践@media (min-width:1110px){.banner{height:684px; background:url(img/banner1980.jpg) center center no-repeat; background-size:auto 100%;}}@media (min-width:769px) and (max-wdth:1110px){.banner{height:383px; background:url(img/banner1110.jpg) center center;}}@media (min-width:569px) and (max-width: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%的浮动，在缩小浏览器的过程中都能时不时的掉下去一个，对于小数点的像素就自动向上补全，太悲哀了。所以如下如何制作一个专业的响应式网站lt9 css file.layout{*width:1000px; min-width:1000px;}.one-percent{width:100%;}html dom所以我建议，把banner 主体部分 版权 三者用三个layout包裹，如此便于对ie6 ie7 ie8做样式。27. 经过长达半年的持续统计，1366px用户最多，依据栅格化，n=24为基准，得出W=(A*n)-i，所以假如要设置大宽度则设置为1310px；a=45px,i=10px；不过因为与门户和电子商务等网站的排版不同且主要为了弹性版式，所以这里大宽度是大家所需要的，至于45px和10px，将来有固定版式的话可以用。28. 响应点如何制作一个专业的响应式网站流体、mq、弹性图片。