通過設(shè)置viewport元標(biāo)簽，可以控制瀏覽器中的viewport大小和縮放比例，實(shí)現(xiàn)自適應(yīng)布局viewport元標(biāo)簽內(nèi)通常包含設(shè)置設(shè)備獨(dú)立像素初始縮放比例以及最小和最大縮放比例的屬性，這些屬性幫助瀏覽器根據(jù)設(shè)備屏幕尺寸調(diào)整頁(yè)面布局采用rem單位進(jìn)行布局，依據(jù)頁(yè)面根元素的字體大小來設(shè)置其他元素尺寸，實(shí)現(xiàn)自適應(yīng)布局。

調(diào)整視口，設(shè)置為width=devicewidth，即視口設(shè)置為當(dāng)前設(shè)備的寬度代碼實(shí)例布局之路移動(dòng)端開發(fā)實(shí)例 確定設(shè)計(jì)圖的最小字體，瀏覽器部分能夠顯示的最小字體為12px當(dāng)移動(dòng)端頁(yè)面寬度為320px時(shí)，最小字體為12px，那么在1080px的設(shè)計(jì)圖中，最小字體應(yīng)為42px代碼實(shí)例html fontsize 42px。

網(wǎng)頁(yè)布局中的元素自適應(yīng)是根據(jù)窗口或子元素調(diào)整大小，以適應(yīng)不同設(shè)備窗口和分辨率，提升網(wǎng)頁(yè)顯示的靈活性自適應(yīng)的優(yōu)點(diǎn)是使網(wǎng)頁(yè)在各種環(huán)境下都能顯示得更為適宜，實(shí)現(xiàn)這一目標(biāo)的方法有多種一種方法是讓元素的寬度和高度與窗口或父元素保持一致例如，為塊狀元素設(shè)置寬度為100%，則其寬度將始終與父。

1用dw編輯器建立了一個(gè)靜態(tài)頁(yè)面 2將建好的靜態(tài)頁(yè)命名為csshtml，標(biāo)題為了“css如何設(shè)置圖片大小自適應(yīng)”3在body中添加兩個(gè)p，設(shè)置不能的寬度，并設(shè)class為p1和p2，目的是用一樣的css控制圖片的寬度在不同的寬度容器中都能很好的顯示 4在兩個(gè)p的class中添加相同的控制圖片的class名為了”img。

實(shí)現(xiàn)這一目標(biāo)的策略是基于響應(yīng)式布局，針對(duì)PC端和移動(dòng)端的差異性進(jìn)行適配在郵件編寫時(shí)，我們關(guān)注郵件渲染的兼容性，盡可能選擇一個(gè)兼容范圍廣泛的HTML和樣式子集，采用平穩(wěn)退化和漸進(jìn)增強(qiáng)的方法，確?；A(chǔ)設(shè)備的瀏覽體驗(yàn)由于郵件中禁止腳本，我們需要?jiǎng)?chuàng)建一套通用代碼來適應(yīng)各種郵件客戶端，如郵件中的圖片。

quot自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)quot的核心，就是CSS3引入的MediaQuery模塊它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件 ltlink rel=quotstylesheetquot type=quottextcssquotmedia=quotscreen and maxdevicewidth400pxquothref=quottinyScreencssquot 上面的代碼意思是，如果屏幕寬度小于400像素maxdevicewidth 400px，就加載ti。

1css把寬度設(shè)置成百分比，width100%左右布局按一定比例設(shè)置好 ，需要多次調(diào)試，保證不同分辨率下的美觀性2根據(jù)不同分辨率或者不同屏幕大小定義相應(yīng)的CSS文件一般多采用這種方式比如ltlink rel=quotstylesheetquot type=quottextcssquot id=quotlinksquot href=quotcssm_wuqinglancssquot ltscript。

對(duì)于圖片，確保其自適應(yīng)且不超過原始大小，可以使用以下樣式img width 100% maxwidth 100% 這會(huì)讓圖片隨著屏幕大小變化而相應(yīng)調(diào)整大小在用戶體驗(yàn)上，為了提升適應(yīng)性，可以考慮以下改進(jìn)措施初次加載時(shí)，根據(jù)用戶的設(shè)備分辨率自動(dòng)調(diào)整頁(yè)面布局，提供最佳顯示效果 在關(guān)閉多個(gè)標(biāo)簽頁(yè)或?yàn)g覽器。

在HTML頁(yè)面上不要使用絕對(duì)字體px，而要使用相對(duì)字體em，對(duì)于大多數(shù)瀏覽器來說，通常用 em = px16 換算，例如16px就等于1em5圖片自適應(yīng)非必要img標(biāo)簽的話，只需要設(shè)置 maxwidth 100%或width100% 語句為img maxwidth 98% css加載的backgroundimage如何自適應(yīng)。

HTML頁(yè)面可采用自適應(yīng)布局或者響應(yīng)式布局自適應(yīng)布局，使用百分比寬度來自適應(yīng)屏幕大小響應(yīng)式布局，使用CSS的@media規(guī)則，根據(jù)不用屏幕大小范圍，編寫多個(gè)CSS樣式，來適應(yīng)多種屏幕大小。

將上述標(biāo)簽加入到源代碼中之后，記得保存文件然后，使用手機(jī)瀏覽這個(gè)網(wǎng)頁(yè)，你將會(huì)看到一個(gè)完美適應(yīng)手機(jī)屏幕大小的自適應(yīng)網(wǎng)頁(yè)這樣的網(wǎng)頁(yè)設(shè)計(jì)不僅能夠提高用戶體驗(yàn)，還能適應(yīng)各種不同的移動(dòng)設(shè)備值得注意的是，除了設(shè)置meta標(biāo)簽，還可以通過媒體查詢CSS3特性來進(jìn)一步優(yōu)化網(wǎng)頁(yè)布局媒體查詢?cè)试S你為不同的。

網(wǎng)頁(yè)自適應(yīng)布局是指網(wǎng)頁(yè)能夠根據(jù)不同的設(shè)備和屏幕尺寸，自動(dòng)調(diào)整布局和字體大小，以適應(yīng)不同的瀏覽環(huán)境下面介紹網(wǎng)頁(yè)自適應(yīng)布局的三個(gè)要點(diǎn)#xF4F1viewport元標(biāo)簽在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度width=devicewidth，原始縮放比例。

HTML網(wǎng)頁(yè)的開發(fā)中，需要對(duì)大小不一的屏幕兼容，使圖片在不同的設(shè)備中可以展示預(yù)期的效果自適應(yīng)屏幕的寬度，利用css中background屬性可以實(shí)現(xiàn) 1新建一個(gè)HTML文件，代碼如下圖 2打開HTML文件所在的文件夾，雙擊文件，跳轉(zhuǎn)到瀏覽器 3改變?yōu)g覽器大小，發(fā)現(xiàn)圖片沒有變化，顯示不全 4在所在文件夾下。

首先你知道寬度的大小吧，比如不同設(shè)備寬度，然后由于圖片外面的div高度是由圖片高度決定的，所以div，可以設(shè)置maxminheight，然而圖片在只設(shè)置width的時(shí)候，height是等比例縮放的。

自適應(yīng)網(wǎng)站是一種利用HTML5技術(shù)，通過檢測(cè)屏幕尺寸自動(dòng)調(diào)整布局的設(shè)計(jì)方式，也被稱為響應(yīng)式設(shè)計(jì)它的核心特點(diǎn)是，無論在PC手機(jī)還是IPAD上，只需一套代碼就能實(shí)現(xiàn)無縫適應(yīng)，無需單獨(dú)為每個(gè)平臺(tái)開發(fā)，大大簡(jiǎn)化了維護(hù)工作這種設(shè)計(jì)對(duì)搜索引擎特別友好，特別是對(duì)百度為了明確告知百度頁(yè)面的自適應(yīng)特性，可以。