專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)江漢免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

本文目錄一覽

• 1，css 自適應(yīng)布局
• 2，響應(yīng)式布局和自適應(yīng)布局有什么樣的區(qū)別
• 3，html自適應(yīng)布局
• 4，響應(yīng)式和自適應(yīng)布局的區(qū)別
• 5，靜態(tài)自適應(yīng)流式響應(yīng)式四種網(wǎng)頁布局有什么區(qū)別

1，css 自適應(yīng)布局

margin才會(huì)擠壓盒子,left只是改變盒子的位置所以,可以先把left去掉,通過margin-right調(diào)mid的寬度

left是position屬性值。。。和margin-right根本不是一對(duì)好不好。。。

2，響應(yīng)式布局和自適應(yīng)布局有什么樣的區(qū)別

靜態(tài)布局（Static Layout） 即傳統(tǒng)Web設(shè)計(jì)，對(duì)于PC設(shè)計(jì)一個(gè)Layout，在屏幕寬高有調(diào)整時(shí)，使用橫向和豎向的滾動(dòng)條來查閱被遮掩部分； 對(duì)于移動(dòng)設(shè)備，單獨(dú)設(shè)計(jì)一個(gè)布局，使用不同的域名如wap.或m.。自適應(yīng)布局（Adaptive Layout） 自適應(yīng)布局

不明白啊 = =！

3，html自適應(yīng)布局

html布局才實(shí)現(xiàn)自適應(yīng)。

設(shè)置寬度或者高度：auto；

寬度用百分比。

CSS:.all.boxall.box3在box3里面再寫內(nèi)容，寬度設(shè)為100%，內(nèi)容就是自適應(yīng)了，

4，響應(yīng)式和自適應(yīng)布局的區(qū)別

一：自適應(yīng)的目的是在不同分辨率的不同設(shè)備上面顯示相同的頁面。手機(jī)的屏幕比較小，寬度通常在600像素以下，pc的像素一般在1000像素以上，部分配置高的筆記本在2000像素以上的也有，同樣的頁面要顯示在不同的設(shè)備上面，還要呈現(xiàn)出滿意的效果，不是一件容易的事情。因此就有人想出了一個(gè)辦法，能不能"一次設(shè)計(jì)，普遍適用"，讓同一張網(wǎng)頁自動(dòng)適應(yīng)不同大小的屏幕，根據(jù)屏幕的寬度，自動(dòng)調(diào)節(jié)網(wǎng)頁的內(nèi)容大小，但是無論怎么樣子，他們的主體的內(nèi)容和布局是沒有變化的。例如：http://m.duba.com/http://m.ctrip.com/html5/二：響應(yīng)式的概念應(yīng)該是覆蓋了自適應(yīng)，但是包括的東西更多了。響應(yīng)式布局可以根據(jù)屏幕的大小自動(dòng)的調(diào)整頁面的展現(xiàn)方式，以及布局。響應(yīng)式布局的一些技術(shù)點(diǎn)紀(jì)錄：(1)允許網(wǎng)頁的寬度自動(dòng)的調(diào)整(2)盡量少使用絕對(duì)的寬度，多點(diǎn)百分比(3)相對(duì)大小的字體:字體不要使用px寫死，最好使用相對(duì)大小的em，或者高清方案rem，這個(gè)不限制與字體，別的屬性也可以這么設(shè)置(4)流式布局，float等float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。(5)選擇加載css，<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />，這個(gè)意思是如果屏幕寬度小于400像素（max-device-width: 400px），就加載tinyScreen.css文件。

5，靜態(tài)自適應(yīng)流式響應(yīng)式四種網(wǎng)頁布局有什么區(qū)別

1、靈活性不同：靜態(tài)布局：毫無靈活性可言，目前已逐漸被淘汰。自適應(yīng)布局：靜態(tài)布局的升級(jí)版，因其強(qiáng)大的靈活性，已逐漸成為高端網(wǎng)頁的代名詞。流式布局：靈活性更高，可適用于其他三種網(wǎng)站布局。響應(yīng)式布局：自適應(yīng)布局的升級(jí)版，響應(yīng)式網(wǎng)站要普遍適應(yīng)市面上各類屏幕，開發(fā)難度和工作量都是非常大的，開發(fā)價(jià)格自然比普通網(wǎng)站高。
2、設(shè)計(jì)方法不同：靜態(tài)布局：居中布局，所有樣式使用絕對(duì)寬度/高度(px)，設(shè)計(jì)一個(gè)Layout，在屏幕寬高有調(diào)整時(shí)，使用橫向和豎向的滾動(dòng)條來查閱被遮掩部分。自適應(yīng)布局：使用 @media 媒體查詢給不同尺寸和介質(zhì)的設(shè)備切換不同的樣式。流式布局：使用百分比定義寬度，高度大都是用px來固定，可以根據(jù)可視區(qū)域 (viewport) 和父元素的實(shí)時(shí)尺寸進(jìn)行調(diào)整，盡可能的適應(yīng)各種分辨率。響應(yīng)式布局：媒體查詢+流式布局。使用@media媒體查詢和網(wǎng)格系統(tǒng)配合相對(duì)布局單位進(jìn)行布局，就是綜合響應(yīng)式、流動(dòng)等上述技術(shù)通過 CSS 給單一網(wǎng)頁不同設(shè)備返回不同樣式的技術(shù)統(tǒng)稱。擴(kuò)展資料：靜態(tài)、自適應(yīng)、流式、響應(yīng)式四種網(wǎng)頁布局的特點(diǎn)概括1、靜態(tài)布局：即傳統(tǒng)Web設(shè)計(jì)，網(wǎng)頁上的所有元素的尺寸一律使用px作為單位。不管瀏覽器尺寸具體是多少，網(wǎng)頁布局始終按照最初寫代碼時(shí)的布局來顯示。
2、流式布局：頁面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變。這就導(dǎo)致如果屏幕太大或者太小都會(huì)導(dǎo)致元素?zé)o法正常顯示。
3、自適應(yīng)布局：分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個(gè)靜態(tài)布局，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍。
4、響應(yīng)式布局：分別為不同的屏幕分辨率定義布局，同時(shí)，在每個(gè)布局中，應(yīng)用流式布局的理念，即頁面元素寬度隨著窗口調(diào)整而自動(dòng)適配。

響應(yīng)式與自適應(yīng)的原理是相似的，都是檢測設(shè)備，根據(jù)不同的設(shè)備采用不同的css，而且css都是采用的百分比的，而不是固定的寬度，不同點(diǎn)是響應(yīng)式的模板在不同的設(shè)備上看上去是不一樣的，會(huì)隨著設(shè)備的改變而改變展示樣式，而自適應(yīng)不會(huì)，所有的設(shè)備看起來都是一套的模板，不過是長度或者圖片變小了，不會(huì)根據(jù)設(shè)備采用不同的展示樣式，流式就是采用了一些設(shè)置，當(dāng)寬度大于多少時(shí)怎么展示，小于多少時(shí)怎么展示，而且展示的方式向水流一樣，一部分一部分的加載，靜態(tài)的就是采用固定寬度的了。

靜態(tài)布局（Static Layout）即傳統(tǒng)Web設(shè)計(jì)，對(duì)于PC設(shè)計(jì)一個(gè)Layout，在屏幕寬高有調(diào)整時(shí)，使用橫向和豎向的滾動(dòng)條來查閱被遮掩部分；對(duì)于移動(dòng)設(shè)備，單獨(dú)設(shè)計(jì)一個(gè)布局，使用不同的域名如wap.或m.。自適應(yīng)布局（Adaptive Layout）自適應(yīng)布局（Adaptive）的特點(diǎn)是分別為不同的屏幕分辨率定義布局。布局切換時(shí)頁面元素發(fā)生改變，但在每個(gè)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。你可以把自適應(yīng)布局看作是靜態(tài)布局的一個(gè)系列。流式布局（Liquid Layout）流式布局（Liquid）的特點(diǎn)（也叫"Fluid") 是頁面元素的寬度按照屏幕進(jìn)行適配調(diào)整，主要的問題是如果屏幕尺度跨度太大，那么在相對(duì)其原始設(shè)計(jì)而言過小或過大的屏幕上不能正常顯示。響應(yīng)式布局（Responsive Layout）分別為不同的屏幕分辨率定義布局，同時(shí)，在每個(gè)布局中，應(yīng)用流式布局的理念，即頁面元素寬度隨著窗口調(diào)整而自動(dòng)適配。可以把響應(yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計(jì)理念的融合。恩恩大概就是這樣。

分享文章：什么叫自適應(yīng)布局，css自適應(yīng)布局
轉(zhuǎn)載來源：http://jinyejixie.com/article20/idehjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、云服務(wù)器、商城網(wǎng)站、App開發(fā)、網(wǎng)站策劃、網(wǎng)站內(nèi)鏈

廣告

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