响应式web网站设计制作方法
发布时间：2018/2/5 来源：沈阳志鼎科技有限公司
在研讨呼应式的时分，记录了一些感触，共享出来，抛砖引玉，期望能够和咱们一同评论。总结下来，呼应式比之前幻想的要杂乱得多。
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%;}
}/*高度一向填充，两边裁剪，这种体会先看比较好*/
/*以下不同方针分辨率载入不同的图片，确保k数最佳，裁剪体会应该共同*/
@media (min-width:769px) and (max-width: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%的起浮，在缩小浏览器的过程中都能时不时的掉下去一个，关于小数点的像素就主动向上补全，太悲痛了。所以如下：
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
所以我建议，把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、弹性图片。
以上都是个人经历，不免片面，欢迎评论。
