HTML自適應的簡單幾步

2021-07-27 08:17:25 字數 644 閱讀 6616

html自適應的簡單幾步

首先,在網頁**的頭部,加入一行viewport元標籤。

viewport是網頁預設的寬度和高度,上面這行**的意思是,網頁寬度預設等於螢幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小佔螢幕面積的100%。

所有主流瀏覽器都支援這個設定,包括ie9。對於那些老式瀏覽器(主要是ie6、7、8),需要使用css3-mediaqueries.js。

由於網頁會根據螢幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。

具體說,css**不能指定畫素寬度:width:*** px; 只能指定百分比寬度:width: xx%;

字型也不能使用絕對大小(px),而只能使用相對大小(em)。

body

選擇載入css

「自適應網頁設計」的核心,就是css3引入的media query模組。

它的意思就是,自動探測螢幕寬度,然後載入相應的css檔案。

上面的**意思是,如果螢幕寬度小於400畫素(max-device-width: 400px),就載入tinyscreen.css檔案。

如果螢幕寬度在400畫素到600畫素之間,則載入smallscreen.css檔案。

HTML 自適應方案

1.設定標籤頭 2.設定body html 全屏 3.避免使用px單位 盡量使用rem 百分比單位並在螢幕發生改變和初始化頁面的時候呼叫以下函式 function resizerem else 4.使用 media標籤做一套橫屏和豎屏的適配 media all and orientation por...

簡單的頁面自適應

1.頁面元素使用百分比定義其寬度,不使用畫素 頁面引入下面的 頁面按比例縮放 2.根據螢幕大小來改變引入的css 此段 表示 當螢幕大於1200,即螢幕最小為1200時,引入changeone.css 當螢幕小於螢幕小於1100,即螢幕最大為1100時,引入changetwo.css tips 只有...

html高度自適應問題

今天在網上找高度自適應問題,這個問題真的好煩,找了好久都是沒用的答案。後來找到乙個高度自適應的 檢視了一下 發現 在樣式表中定義html和body標籤的都為height 100 這樣在頁面中寫入div的時候樣式寫為height 100 這個div就能自適應高度100 了。後來我檢視了好多 高度自適應...