自適應佈局就是讓網頁能夠自適應的顯示在不同大小的終端設備上，它對於某些大型的網站來說兼容性好，代碼高效但是由於它需要開發多個界面來適應不同的設備因此修改難度大
自適應佈局指的是能夠使網頁自適應顯示在不同大小終端設備上的網頁設計方式及技術。接下來在文章中將為大家具體介紹有關自適應佈局的知識，具有一定的參考價值，希望對大家有所幫助
【推薦課程：CSS教學】
#自適應佈局：
自適應佈局的特點是在不同的螢幕大小下設定不同的佈局格式。也就是說在某個畫面下元素在這塊地方但是換一個不同尺寸的畫面下，元素不一定還在原來的地方，有可能換了一個地方。它們主要是佈局上的改變但元素並沒有變化。這樣的效果可以看成是不同螢幕下由多個靜態佈局組成的
例：實作兩端固定中間自適應的佈局
<style type="text/css">
p {margin: 0; }
.left {width: 300px; height: 200px; float: left; background: coral; margin-left: -100%;}
.right {width: 300px; height: 200px; float: left; background: lightblue; margin-left: -300px;}
.middle {width: 100%; height: 200px;float: left; background: lightpink; }
span{
display: inline-block;
margin: 0 200px;
}
</style>
<body>
<div class="wrap">
<p class="middle">
<span class="inner">
中间自适应
</span>
</p>
<p class="left">左边固定</p>
<p class="right">右边固定</p>
</div>效果圖如下：
當把視窗縮小時就可以看到中間自適應的那部分的寬度變小
自適應佈局的優點和缺點
優點
（1）對一些複雜性的大型網站它的兼容性更好，實施起來更加方便
（2）程式碼更有效率，測試更容易。
（3）圖片可控性高
缺點
#因為要適應不同的行動裝置螢幕，所以同一個網站，往往需要為不同的設備開發不同的頁面，因而增加了開發成本。尤其是當需求改變時，可能會改變多套程式碼。流程繁瑣。
總結：以上就是本篇文章的全部內容了，希望透過這篇文章可以幫助大家更好的理解自適應版面。
以上是如何理解自適應佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！
