HTML網頁設計自動適應螢幕寬度

2021-08-27 07:56:27 字數 493 閱讀 9450

允許網頁寬度自動調整

「自適應網頁設計」到底是怎麼做到的?其實並不難。

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

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

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

不使用絕對寬度

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

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

網頁自動適應螢幕

一 其中 width viewport的寬度 height viewport的高度 initial scale 初始的縮放比例 minimum scale 允許使用者縮放到的最小比例 maximum scale 允許使用者縮放到的最大比例 user scalable 使用者是否可以手動縮放 二 所有...

html網頁寬度自動適應手機螢幕

可以通過設定螢幕的縮放比例來實現 一 使用meta標籤,這也是普遍使用的方法,理論上講使用這個標籤是可以適應所有尺寸的螢幕的,但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。1 通過設定請求頭實現 在網頁的中增加以上這句話,可以讓網頁的寬度自動適應手機螢幕的寬度。其中 wi...

網頁寬度自動適應手機螢幕寬度

在網頁的中增加以上這句話,可以讓網頁的寬度自動適應手機螢幕的寬度。其中 width device width 表示寬度是裝置螢幕的寬度 initial scale 1.0 表示初始的縮放比例 minimum scale 0.5 表示最小的縮放比例 maximum scale 2.0 表示最大的縮放比...