網(wǎng)頁(yè)自適應(yīng)開(kāi)發(fā)的幾個(gè)要點(diǎn)
時(shí)間：2023-09-04 07:12:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-04 07:12:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
網(wǎng)頁(yè)自適應(yīng)開(kāi)發(fā)的幾個(gè)要點(diǎn)：1. 首先最重要的，在html代碼頭部加上一段代碼：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
簡(jiǎn)單解釋下，viewport 表示用戶網(wǎng)頁(yè)的可視區(qū)域，簡(jiǎn)稱視圖或窗口。
width：控制視圖的大小， device-width 表示和設(shè)備屏幕同大小。
initial-scale：網(wǎng)頁(yè)初始縮放比例,1.0表示占屏幕100%的面積。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：是否允許手動(dòng)縮放。
2. 圖片的自適應(yīng)
這個(gè)比較簡(jiǎn)單，在css中加入一行代碼： img { max-width: 100%;}
3. 文字以及像素繪制的圖案的自適應(yīng)
這部分主要通過(guò)單位來(lái)控制，介紹幾個(gè)比較常用的單位：
px pixel的縮寫(xiě)，中文是像素。比如電腦像素(或者說(shuō)分辨率)是1920x1080的，就是指水平方向是1920個(gè)像素點(diǎn)，垂直方向是1080個(gè)像素點(diǎn)。px缺點(diǎn)很明顯，就是固定值，無(wú)法跟著屏幕分辨率等比的變化。
em 表示相對(duì)尺寸，em可以較好的適應(yīng)屏幕尺寸變化，em和px不同，em在一個(gè)屏幕中不是固定的值，他繼承于父級(jí)元素的尺寸。
% 就是百分比，也是繼承于父級(jí)元素。
vw view width的縮寫(xiě)，表示視圖的寬度。也就是能根據(jù)瀏覽器的高度寬度自動(dòng)調(diào)整，1vw等于視圖寬度的1%，同理vh 是view height的縮寫(xiě)，表示視圖的高度。并且vw 和 vh 都是不包含頁(yè)面滾動(dòng)條的。
比較推薦使用的是 % 和 vw ，都能很好地用來(lái)做自適應(yīng)的開(kāi)發(fā)。
在線咨詢