首頁 > 文章 > web前端 > 如何理解自適應佈局

如何理解自適應佈局

清浅原創: 2019-03-01 15:18:543980瀏覽

自適應佈局就是讓網頁能夠自適應的顯示在不同大小的終端設備上，它對於某些大型的網站來說兼容性好，代碼高效但是由於它需要開發多個界面來適應不同的設備因此修改難度大

自適應佈局指的是能夠使網頁自適應顯示在不同大小終端設備上的網頁設計方式及技術。接下來在文章中將為大家具體介紹有關自適應佈局的知識，具有一定的參考價值，希望對大家有所幫助

如何理解自適應佈局

【推薦課程：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>

效果圖如下：

如何理解自適應佈局