做網(wǎng)站中的感應(yīng)式布局是怎么實現(xiàn)的？

發(fā)布時間：2016/8/10 10:46:16 關(guān)注：1741

移動建站已經(jīng)成為公司企業(yè)宣傳的標配，大量的網(wǎng)絡(luò)公司在制作公司網(wǎng)站的過程中要先做PC端的網(wǎng)站，再單獨開發(fā)平板、移動端網(wǎng)站，其實網(wǎng)站采用感應(yīng)式布局進行架構(gòu)就能一次建站，所有設(shè)備都能訪問。

什么是感應(yīng)式布局呢？根據(jù)百度百科的資料我們可以窺豹一斑

響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。
響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設(shè)備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設(shè)計師采用這個技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。

優(yōu)點和缺點編輯
優(yōu)點：[1]
面對不同分辨率設(shè)備靈活性強
能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點：[1]
兼容各種設(shè)備工作量大，效率低下
代碼累贅，會出現(xiàn)隱藏?zé)o用的元素，加載時間加長
其實這是一種折中性質(zhì)的設(shè)計解決方案，多方面因素影響而達不到最佳效果
一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況

在很多公司看來，一站式解決是最好的解決方案，管理后臺一次發(fā)布，全部訪問客戶端同時同步，針對感應(yīng)式布局的缺陷完全可以通過高效優(yōu)質(zhì)的代碼來克服

。

下面我們上一個例子，很直觀的說明感應(yīng)式布局的好處。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網(wǎng)站制作中的感應(yīng)式布局</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">華邦網(wǎng)絡(luò)科技有限公司</div>
<div class="left">專業(yè)網(wǎng)站制作，網(wǎng)站搜索排名服務(wù)</div>
    
</div>

</body>
</html>

上一條：網(wǎng)站制作過程中jquery中的mousewheel事件

下一條：請不要以安全的名義對客戶進行綁架

互聯(lián)網(wǎng)品牌整合服務(wù)·為夢想者創(chuàng)造夢想品牌

致力于服務(wù)頭部企業(yè).打造標桿項目

網(wǎng)站優(yōu)化網(wǎng)站搜索排名

做網(wǎng)站中的感應(yīng)式布局是怎么實現(xiàn)的？

互聯(lián)網(wǎng)品牌整合服務(wù)·為夢想者創(chuàng)造夢想品牌

致力于服務(wù)頭部企業(yè).打造標桿項目

網(wǎng)站優(yōu)化 網(wǎng)站搜索排名

做網(wǎng)站中的感應(yīng)式布局是怎么實現(xiàn)的？

網(wǎng)站優(yōu)化網(wǎng)站搜索排名

做網(wǎng)站中的感應(yīng)式布局是怎么實現(xiàn)的？