客服
谈谈响应式网站前端设计
一段时间之前我对响应式的概念还是Bootstrap、Amaze之类的框架组件，用过几次也不以为然，我想国内搜索引擎在提供移动搜索结果页时还是会给移动网站加分的，却不能像google一样识别响应式网站，可能还需要一段时间发展。但毫无疑问的是现在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来说，如果你要设计一个类似于google的搜索框就显得很难，google类型的搜索框实际上是将一个input包含在box里面，然后在这个box里面再加上左右图标，如果你用bootstrap来做可能会出现很多莫名奇妙的冲突，但实际上你得到了什么呢？一个圆角一个行高？还是他的百分比宽度呢？这些用css来写只不过是几句代码的事。
还有一些框架过度的依赖AJAX，它们也许想法很好，大量的AJAX在前端看起来的确很酷，对用户的友好性也足够强，但大量的请求对服务器并不友好，可能会使服务器的实际负载大大下降。总之还是一句话，按实际需求来解决问题，框架并不是万能的。
注：相关网站建设技巧阅读请移步到建站教程频道。
相关文章：
-
绵阳网站建设_绵阳做网站_绵阳网站制作——绵阳网络公司...
-
从企业建站角度讲，最便捷、最适合企业的建站系统莫过于自助建站系统，市场上可供选择的自助建站平台也是一搜一大把。这些自助建站平台采用傻瓜式建站风格，容易上手，操作简单方便...
-
现在想做一个网站成本很低了，买个域名，买个几十块空间，弄个网站建设程序就可以开始你的玩耍了，如果你还想找成本更低的，可以看下面的分享。 如何创建网站一直都是很多朋友想要知...
-
商城网站建设如何将吸引力提升 在信息如此丰富多样的今天，商城网站建设如何才能够在众多的同类当中脱颖而出，获得大众的吸引和青睐呢？这其实是相关网站建设人员一直在思考的一个问...
-
现在越来越多的企业重视网站的运营推广，那怎样推广效果更好呢？绵阳蟠龙网络小编认为没用永恒不变得，而且要根据企业的具体情况选择合适的推广方式才是最好的，如果你又运营推广的...
-
随着互联网的发展，人们每时每刻已经离不开网络，而网站是网络的基本组成部分，可以这么说，网络是由各种各样的网站组成的，当下，网站是每个企业的标配，很多个人都有自己的网站，...
-
网站现在是一个企业的标配，很多没有网站的企业不清楚网站对企业有什么作用，那么今天绵阳蟠龙小编总结一下网站对企业都有哪些好处，希望看完之后您对网站有更深一层的认识。 一、低...
-
现在网站对一个企业越来越重要了，网站不仅是一个公司必备的名片，而且有利于提升企业的品牌形象，低成本扩大公司销售的一个重要渠道，可以将公司的业务和产品推向全国，那么公司想...
-
在互联网发展至今天，网站对于一个企业越来越重要，网站不仅能有效的提升企业品牌知名度，企业形象，也是一个企业的有力的销售渠道，网络营销推广做好了可以做全国的业务，那一个企...
-
随着互联网发展的迅猛，网站建设市场竞争越来越大，鱼龙混杂，出现智能建站、模板建站、定制建站等服务，很多朋友搞不清楚他们的区别，以及定制型网站有什么优势，今天绵阳蟠龙小编...
- 上一篇：短URL系统是怎么设计的？
- 下一篇：米拓网站搭建-第六步：网站安装