☰
登录网站
潍坊华邦网络 2016-08-10 10:46:16 1.9K 0
游戏编码：GM393100080 最后修订时间：2016-08-10 10:46:16
无附件
移动建站已经成为公司企业宣传的标配，大量的网络公司在制作公司网站的过程中要先做PC端的网站，再单独开发平板、移动端网站，其实网站采用感应式布局进行架构就能一次建站，所有设备都能访问。
什么是感应式布局呢？根据百度百科的资料我们可以窥豹一斑
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
优点和缺点编辑
优点：[1]
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：[1]
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
在很多公司看来，一站式解决是最好的解决方案，管理后台一次发布，全部访问客户端同时同步，针对感应式布局的缺陷完全可以通过高效优质的代码来克服
。
下面我们上一个例子，很直观的说明感应式布局的好处。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网站制作中的感应式布局</title>
<style>
@media screen and (max-width:600px){
.main{height:1000px; overflow:hidden}
.menu{ background:#330A0B ;overflow:hidden}
.menu ul{ height:30px; width:30px; float:right; overflow:hidden; background:#0341AF}
.menu ul:hover li{ display:block;}
.left{display:none}
.right{ width:800px; float:left; background:#C96668}
}
@media screen and (min-width:600px) and (max-width:1020px){
.main{height:1000px; overflow:hidden}
.menu{ background:#330A0B}
.menu ul{ height:30px; width:30px;line-height:50px;}
.left{display:none}
.right{ width:800px; float:left; background:#C96668}
}
@media screen and (min-width:1020px){
.main{height:300px; overflow:hidden; width:1280px; margin:0 auto;}
.menu{ background:#330A0B}
.menu ul{ width:1280px; margin:0 auto; line-height:50px;}
.left{ background:#7A4142; float:right; width:300px; min-height:600px;}
.right{ width:800px; float:left; background:#C96668; min-height:300px;}
}
</style>
</head>
<body>
<div class="main">
<div class="right">华邦网络科技有限公司</div>
<div class="left">专业网站制作，网站搜索排名服务</div>
</div>
</body>
</html>