CSS實(shí)現(xiàn)自適應(yīng)布局的方法

發(fā)布時(shí)間：2020-08-27 11:20:30 來源：億速云閱讀：230 作者：小新欄目：web開發(fā)

小編給大家分享一下CSS實(shí)現(xiàn)自適應(yīng)布局的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

自適應(yīng)布局就是讓網(wǎng)頁能夠自適應(yīng)的顯示在不同大小的終端設(shè)備上，它對于某些大型的網(wǎng)站來說兼容性好，代碼高效但是由于它需要開發(fā)多個界面來適應(yīng)不同的設(shè)備因此修改難度大

自適應(yīng)布局指的是能夠使網(wǎng)頁自適應(yīng)顯示在不同大小終端設(shè)備上的網(wǎng)頁設(shè)計(jì)方式及技術(shù)。 CSS實(shí)現(xiàn)自適應(yīng)布局的方法

自適應(yīng)布局：

自適應(yīng)布局的特點(diǎn)是在不同的屏幕大小下設(shè)置不同的布局格式。也就是說在某個屏幕下元素在這塊地方但是換一個不同尺寸的屏幕下，元素不一定還在原來的地方，有可能換了一個地方。它們主要是布局上的改變但元素并沒有變化。這樣的效果可以看成是不同屏幕下由多個靜態(tài)布局組成的

例：實(shí)現(xiàn)兩端固定中間自適應(yīng)的布局

<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">
            中間自適應(yīng)
        </span> 
    </p>
    <p class="left">左邊固定</p>
    <p class="right">右邊固定</p>
</div>

效果圖如下：

CSS實(shí)現(xiàn)自適應(yīng)布局的方法

當(dāng)把窗口縮小時(shí)就可以看到中間自適應(yīng)的那部分的寬度變小

CSS實(shí)現(xiàn)自適應(yīng)布局的方法

自適應(yīng)布局的優(yōu)點(diǎn)和缺點(diǎn)

優(yōu)點(diǎn)

（1）對一些復(fù)雜性的大型網(wǎng)站它的兼容性更好，實(shí)施起來更加方便

（2）代碼更加高效，測試更加容易。

（3）圖片可控性高

缺點(diǎn)

因?yàn)橐m應(yīng)不同的移動端設(shè)備屏幕，所以同一個網(wǎng)站，往往需要為不同的設(shè)備開發(fā)不同的頁面，因而增加了開發(fā)成本。尤其是當(dāng)需求發(fā)生改變時(shí)，可能會改動多套代碼。流程繁瑣。

以上是CSS實(shí)現(xiàn)自適應(yīng)布局的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

CSS實(shí)現(xiàn)自適應(yīng)布局的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽