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

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

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

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

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

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

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

。

下面我們上一個(gè)例子，很直觀的說明感應(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事件

下一條：請(qǐng)不要以安全的名義對(duì)客戶進(jìn)行綁架

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

致力于服務(wù)頭部企業(yè).打造標(biāo)桿項(xiàng)目

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

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

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

致力于服務(wù)頭部企業(yè).打造標(biāo)桿項(xiàng)目

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

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

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