一段时间之前我对响应式的定义还是bootstrap、amaze之类的框架组件，用过几次也不以为然，我想国内搜索引擎在提供手机端搜索结果页时还是会给移动网站加分的，却不可以像谷歌一样辨别响应式网站，可能还需要一段时间进步。但毫无疑问的是目前web趋势转向移动优先，当然假如你用域名或者其他解决方法更不是不能，只不过响应式可能更简单一些，进步前景也是很好的。
这两三个星期我天天都在写响应式页面，借此累积了不少响应式页面和ajax的经验。我大致的梳理了几个响应式页面的重点，假如想往这方面进步或是对它有的兴趣，期望能给大伙一点帮助。
百分比
解决缩放问题的思路有好几种，比较适合小白的无疑是百分比式的布局，在重要的宽度设置下百分比可以起到出人预料的成效：
box1{ width:100%;}
ul{ margin:0 2%;}
我并非推崇全部用百分比来布局，但有时这或许会大大降低工作量，给box1宽度设置100%之后它会自动以宽度填充满整个浏览器，无论你是手机pc什么分辨率，它一直有非常不错的表现。这个时候你给box1下面的ul设置左右2%的margin也是这样，伴随浏览器窗口大小改变时ul的实质margin大小也会伴随变化，这么一说大伙多少也都理解了百分比布局的定义。
当然有时也不会有想象中的成效，尤其是在较小的分辨率上时，原来看上去很好的百分比设定会看上去非常怪，由于响应式多数时候只约定宽度，长度都是由文档和浏览器来决定的，这个时候想要在所有些终端上都有非常不错的体验就需要media query来解决问题。
控制大小
习惯了pc页面的前端开发者可能愈加喜欢用pc来控制大小，但在响应式的页面中出现更多的是em和rem，用它们来控制字体大小甚至是框体大小对整体的成效很明显。
打个比方，我的字体设置是10px/20px/30px等等不一样的，网站上不一样的地方自然字领会有大小的差异这是势必的，假如一个页面足够复杂或是文字足够多的话，这类字体的大小设置也是一个量非常大的工作，不过在响应式页面中你设计完它们并非完事：你用手机浏览一下页面会发现字领会撑的非常大，甚至有个别标题撑满了手机屏幕，这对手机端用户的体验影响不言而喻。因此你要开始写媒体查看，然后发现一个页面有几十个字体需要设置，假如把它们在不同分辨率下一一调整你可能需要写百句以上的css代码，但假如你用em/rem，就可以把工作量大大减小，同时还可以保证字体的统一比率。
关于em/rem的讲解大伙可以自行搜索，网上这种课程数不胜数，事实上它们就和px一样简单，当我开始用之后也不过只花了几分钟熟知它们。就像前面说的一样，你也可以用它们来控制框体的大小，然后再响应式的页面下统一缩放，当然这需要足够多的计算。另外值得一提的是字体图标也可以用它们来控制，具体可以参考不同“字体图标”的官方文档。
media query
通俗的讲解就是css的媒体查看功能，它既可以准确的辨别设施也可以自己设定分辨率或者宽度，w车商融hool里有media query的参考文档，假如你嫌文档太多我可以粗略的讲解一下它的工作原理。
在有必要的时候你或许会给一个box设置高度，当box拥有500px高度时它可能在pc上看着很好，但用手机打开时就有的吓人了，整个box充斥了页面，里面的内容排列混乱，紧急的影响了客户体验，这个时候你就能用媒体查看media query，用它单独的为不同大小的设置不一样的高度，譬如640/320打开时box时就分别处于300/200px的高度，如此看着就很好了。
大伙或许会想到import，事实上媒体查看就能如此理解，它为不一样的宽度或设施设定了像import的css规则，保证了实质渲染完成页面的成效。
媒体查看也可以为一个页面筹备多个不一样的css，当设施大小不同时用不一样的css文件，假如样式文件比较大也可以考虑这种办法。
说说框架
我见到过和实质用的前端框架中，不少都是富前端种类的设计，并不主张小白前端盲目的用法框架来布局，不管框架看着多美好。在实质的用法过程中大伙或许会发现不少问题，譬如类名太多太复杂（在没不少的css经验时可能对约定的类名所知甚少）、样式冲突。引入资源过多致使页面繁重、偏离设计成效等等。
就拿bootstrap来讲，假如你要设计一个像谷歌的搜索框就看上去非常难，谷歌种类的搜索框事实上是将一个input包括在box里面，然后在这个box里面再加上左右图标，假如你用bootstrap来做或许会出现不少莫名奇妙的冲突，但事实上你得到了什么呢？一个圆角一个行高？还是他的百分比宽度呢？这类用css来写只是几句代码的事。
还有一些框架过度的依靠ajax，它们或许想法非常不错，很多的ajax在前端看着的确非常酷，对用户的友好性也足够强，但很多的请求对服务器并不友好，或许会使服务器的实质负载大大降低。总之还是一句话，按实质需要来解决问题，框架并非万能的。
推荐题目：响应式网站建设的几个基础知识点链接推荐：https://www.cdcxhl.com/news/106662.html
网站制作、网络营销推广公司|博久网络，是专注品牌与成效的网站建设，网络推广营销网站优化公司；服务项目有网站建设、响应式网站等
