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

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

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

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

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

quot自適應(yīng)網(wǎng)頁設(shè)計quot的核心，就是CSS3引入的MediaQuery模塊它的意思就是，自動探測屏幕寬度，然后加載相應(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。

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

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

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

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

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

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

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

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