web前端-移動端響應式與自適應
一. 在HTML的頭部加入meta標簽
在HTML的頭部,也就是head標簽中增加meta標簽,告訴瀏覽器網頁寬度等於設備屏幕寬度,且不進行縮放,代碼如下:
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
簡單分析一下這一行代碼的含義:width=device-width表示網頁的寬度等於設備屏幕的寬度,initial-scale=1.0表示設置頁面初始的縮放比例為1,user-scalable=no表示禁止用戶進行縮放,maximum-scale=1.0 和 minimum-scale=1.0 表示設置最大的和最小的頁面縮放比例。因為各大瀏覽器對meta標簽的解析程度不一樣,所以我們要盡可能的去兼容所有瀏覽器。
二. 百分比布局
在頁面布局中,相對寬度和絕對寬度相結合來進行布局,將更有利於網頁的可維護性。
三. 響應式頁面的實現
目前一般常見的實現響應式有兩種方法,一種是利用媒體查詢,另外一種是bootstrap下的柵格布局,以後介紹bootstrap的時候來介紹柵格布局,這裏主要來說一下如何利用媒體查詢實現響應式布局。
媒體查詢,即 @media 查詢,媒體查詢可以針對不同的屏幕尺寸設置不同的樣式,特別是如果你需要設計響應式的頁面,@media 是非常有用的。當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面。因為是設置樣式,所以將媒體查詢相關的代碼放在css文件的最下方即可。
為了更加清晰地理解響應式的用法,我在下方列舉了兩個案例。第一個案例比較簡單,實現了在不同的頁面寬度中改變body的背景顏色的作用。第二個案例以具體的項目來舉例,更加方便用戶
實例1:
如果頁面寬度小於 300 像素,則修改body的背景顏色為紅色:
@media screen and (max-width: 300px) { body { background-color:red; } }如果頁面寬度大於 300 像素並且小於600像素,則修改body的背景顏色為綠色:
@media screen and (min-width: 300px) and (max-width:600px) { body { background-color:green; } }如果頁面寬度大於 600 像素,則修改body的背景顏色為藍色:
@media screen and (min-width: 600px) { body { background-color:blue; } }
代碼解釋:
screen 表示電腦屏幕,平板電腦,智能手機等,min-width和max-width 用於定義設備中頁面的最小和最大寬度。
四. 頁面使用相對字體
在我們平常的網頁布局過程中經常使用絕對單位像素(px)來進行布局,這樣的布局不適合我們自適應網頁的實現,所以我們現在來介紹兩種常見的絕對單位em和rem。rem(font size of the root element)是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位,em(font size of the element)是指相對於父元素的字體大小的單位。它們之間其實很相似,只不過一個計算的規則是依賴根元素一個是依賴父元素計算。
實際上講了這麽多,大家可能已經了解了rem的用法,但是還不了解如何利用rem去實現移動端的自適應。說到底,rem實現移動端自適應的原來在於它本身的特性,它可以始終根據根元素的字體大小去改變自己的值。目前各種常見手機的屏幕尺寸大小如下圖所示:
我們想實現手機端自適應,就是可以讓頁面的元素字體、間距、寬高等屬性的屬性值可以隨著手機屏幕尺寸的變化而變化,接下來我們看如何利用js來動態的設置rem並實現移動端的自適應,Js代碼如下:
//獲取html元素 var html = document.getElementsByTagName(‘html‘)[0]; //屏幕的寬度(兼容處理) var w = document.documentElement.clientWidth || document.body.clientWidth; //750這個數字是根據你的設計圖的實際大小來的,所以值具體根據設計圖的大小 html.style.fontSize = w / 750 + "px";
以上代碼實現了利用Js獲取設備屏幕的寬度,並根據屏幕的寬度動態改變根元素html的font-siz屬性的作用。比如說,對於iphone6而言,屏幕尺寸為750,那麽在iPhone6下html的font-size為1px,所以1rem = 1px;對於iPhone5而言,屏幕尺寸為640,那麽在iPhone5下html的font-size為640/750 = 0.85333px,所以1rem = 0.85333px。這樣的話即使我們對一個元素設置同樣的大小和單位,也會在不同的設備下顯示不同的大小。比如說div{width:100rem},在iPhone6下它的寬度將等於100px,而在iPhone5下它的寬度等於100 * 0.85333 = 85.333px。這樣我們就真正實現了移動端的自適應。
web前端-移動端響應式與自適應