移動端的適配

移動端開發和PC端頁面的區別是什麼

• 移動端頁面和PC端頁面區別在我看來就是屏幕的寬度和高度不一樣，頁面中內容在不一樣的寬度和高度中所佔的比例也是不一樣的。移動端沒有hover事件，移動端也沒有touch事件，這就是我如今對於移動端頁面和PC頁面區別。除了這些之外，所須要用到的CSS、HTML和JavaScript的只是都是差很少的。

怎樣作適配移動端的頁面呢

1.在head標籤中加入<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">。viewport就是視口，也就是瀏覽器所顯示的屏幕區域,你用chrome瀏覽器模擬全部的手機用document.documentElement.clientWidth取得的寬度都是980px。也就是當你用手機看頁面的時候看到的都是縮放的頁面，手機屏幕的寬度來模擬980px將頁面進行縮放。若是你專門的適應手機的屏幕作了一個頁面，並不想讓手機進行縮放，就能夠在head標籤中加入<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">這樣就能夠不縮放頁面進行顯示。這個標籤的意思就是viewport的寬度就是設備的寬度，不進行縮放，初始的縮放值是1，最大縮放值也是1，最小縮放值也是1。這樣你再用doucment.documentElement.clientWidth所取得的寬度就是設備自生的寬度。因此作移動端的頁面加上這個meta標籤是必須的。

2.使用媒體查詢：@media(max-width=375px){css},這行代碼表示只有在知足屏幕寬度位0-375px的時候{}中的css樣式纔會生效的。@meida(min-width=200px)and(max-width=400px){},若是是要知足多個條件的時候中間就要使用and鏈接起來。利用這個就能夠作出來響應式頁面，當屏幕的寬度不一樣的時候展示出來的頁面也就不一樣。可是這樣你就必須謝多個不一樣的css文檔來知足不一樣寬度的設備。也可使用link標籤在標籤中加上media，例如：<link rel="stylesheet" href="style.css" media="(max-width=375px)">,這樣只有在屏幕寬度在375px纔會生效。

3.使用媒體查詢@media須要在不一樣的寬度下寫出不一樣的css樣式，這樣的線的有點繁瑣。還有一種移動端的佈局就是使用動態的rem來進行佈局，這樣可使得在你的設備的寬度發生變化的時候，頁面的樣式也會隨這設備的寬度變化而發生變化。rem指的就是root font-size根元素的字體大小，也就是html元素的字體的大小。在head標籤中加上如下代碼<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><script>var page=window.innerWidth;document.write('<style>html{font-size:'+ pageWidth + 'px;}</style>')</script>這樣就可使得rem的大小等於屏幕的寬度。計算出頁面中的每部分在這個屏幕寬度中所佔的比例，單位使用rem，這樣在你屏幕的寬度發生變化的時候頁面的內容也會發生相應的變化，而不會在頁面寬度發生變化的時候頁面中內容的寬度會發生變形。可是不是都必須使用rem來作單位，其餘的px等也能夠來使用。