一段时间之前我对呼应式的概念仍是Bootstrap、Amaze之类的结构组件，用过几次也不认为然，我想国内查找引擎在供给移动查找成果页时仍是会给移动网站加分的，却不能像谷歌相同辨认呼应式网站，也许还需要一段时间开展。但毫无疑问的是如今Web趋势转向移动优先，当然假如你用域名或许别的处理方案也不是不能够，仅仅呼应式也许更简略一些，开展前景也是不错的。

　　这两三个星期我天天都在写呼应式页面，借此累积了不少呼应式页面和ajax的经历。我大致的梳理了几个呼应式页面的要点，假如想往这方面开展或是对它有些爱好，希望能给我们一点帮助。

　　操控巨细

　　习惯了PC页面的前端开发者也许愈加喜爱用pc来操控巨细，但在呼应式的页面中呈现更多的是em和rem，用它们来操控字体巨细乃至是框体巨细对全体的作用十分显着。

　　打个比方，我的字体设置是10px/20px/30px等等不相同的，网站上不相同的当地天然字领会有巨细的差异这是必然的，假如一个页面满足杂乱或是文字满足多的话，这些字体的巨细设置也是一个量很大的作业，不过在呼应式页面中你规划完它们并不是完事：你用手机阅读一下页面会发现字领会撑的很大，乃至有单个标题撑满了手机屏幕，这对移动端用户的体会影响可想而知。因而你要开端写媒体查询，然后发现一个页面有几十个字体需要设置，假如把它们在不相同分辨率下一一调整你也许需要写百句以上的css代码，但假如你用em/rem，就能够把作业量大大减小，一起还能够确保字体的一致份额。

　　对于em/rem的解说我们能够自行查找，网上这类教程不计其数，实践上它们就和px相同简略，当我开端用之后也不过只花了几分钟了解它们。就像前面说的相同，你也能够用它们来操控框体的巨细，然后再呼应式的页面下一致缩放，当然这需要满足多的核算。别的值得一提的是字体图标也能够用它们来操控，具体能够参阅不相同“字体图标”的官方文档。

　　百分比

　　处理缩放疑问的思路有好几种，最适合菜鸟的无疑是百分比式的规划，在要害的宽度设置下百分比能够起到出人意料的作用：

　　box1{ width:100%;}

　　ul{ margin:0 2%;}

　　我并不是推重悉数运用百分比来规划，但有时候这也许会大大削减作业量，给box1宽度设置100%之后它会主动以宽度填充溢全部阅读器，不论你是手机PC什么分辨率，它总是有极好的体现。这时候你给box1下面的ul设置摆布2%的margin也是如此，随着阅读器窗口巨细改动时ul的实践margin巨细也会随着变化，这么一说我们多少也都理解了百分比规划的概念。

　　当然有时候也不会有幻想中的作用，特别是在较小的分辨率上时，本来看似不错的百分比设定会显得很怪，因为呼应式大都时候只约好宽度，长度都是由文档和阅读器来决定的，这时候想要在所有的终端上都有极好的体会就需要Media Query来处理疑问。

　　Media Query

　　浅显的解说即是CSS的媒体查询功用，它既能够准确的辨认设备也能够自个设定分辨率或许宽度，w3cshool里有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在前端看起来的确很帅，对用户的友爱性也满足强，但很多的请求对服务器并不友爱，也许会使服务器的实践负载大大降低。总归仍是一句话，按实践需要来处理疑问，结构并不是全能的。

      如果您想了解更多，可以联系我们子涵科技【秦皇岛网络公司】我们专注SEO优化，网站建设，有着多年的经验！费用低，回报大！