CSS實現(xiàn)自適應布局的方法

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

成都創(chuàng)新互聯(lián)是一家專業(yè)提供集安企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站制作、成都網(wǎng)站設計、HTML5、小程序制作等業(yè)務。10年已為集安眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

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

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

自適應布局：

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

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

<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>

效果圖如下：

CSS實現(xiàn)自適應布局的方法

當把窗口縮小時就可以看到中間自適應的那部分的寬度變小

CSS實現(xiàn)自適應布局的方法

自適應布局的優(yōu)點和缺點

優(yōu)點

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

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

（3）圖片可控性高

缺點

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

以上是CSS實現(xiàn)自適應布局的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：CSS實現(xiàn)自適應布局的方法
標題鏈接：http://bm7419.com/article44/iihphe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設、靜態(tài)網(wǎng)站、Google、外貿(mào)網(wǎng)站建設、網(wǎng)站設計公司、用戶體驗

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容