隨著手機硬體配置的飛速增長、螢幕尺寸的越來越大和網路頻寬的逐漸提公升，越來越多的pc業務和服務在向移動端轉移。然而在這移動端的時代，為了處理各終端螢幕的適配，是否亂了手腳呢？
meta之viewport，其主要用來告訴瀏覽器如何規範的渲染web頁面，而你則需要告訴它視窗有多大。在開發移動端頁面，我們需要在html中設定meta標籤如下：
1
name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
flexible是乙個製作h5適配的開源庫，需要在html中引入，可以直接使用阿里cdn：
1
src="">執行這個js後，會在元素上增加乙個data-dpr屬性，以及乙個font-size樣式。js會根據不同的裝置新增不同的data-dpr值，比如說1、2或者3，同時會給html加上對應的font-size的值，比如說37.5px。script>
用px寫的是絕對單位，這種方法肯定不行。讓我們來擁抱rem吧！！！
我們知道 em 的計算是基於父級元素的，在實際使用中給我們的計算帶來了很大的不便。所以 rem 的出現解救了我這樣不會算術的人，再也不用擔心父級元素的 font-size 了，因為它始終是基於根元素（html） 的。如果對rem還有不懂的可以先看看這個css3的rem設定字型大小比如預設的 html font-size=16px，那麼我想設定12px 的文字就是：12÷16=0.75（rem）
剛剛我們引入了手淘的flexible，並給html加了font-size，如此一來，頁面中的元素，都可以通過rem單位來設定。他們會根據html元素的font-size值做相應的計算，從而實現螢幕的適配效果。
使用sass的同學，可以使用sass的函式、混合巨集這些功能來實現：
12
3
@function px2rem(這裡的這個引數$base-font-size: 75px，可以通過(psd檔案的寬度/10)來計算。假如psd寬750，則$base-font-size為75px。$px,
$base-font-size: 75px)
使用：
psd中量多少就寫多少
12
3
4
5
//比如量取box寬為190，高為190，則**：沒用過的可以用sublime的cssrem的外掛程式實現。.box
因為這是商業**，所以就只貼了一部分**，忘見諒，謝謝最下面有我開源專案的**，可以參考，如果對你有幫助的話，給個star。
12
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
charset="utf-8">name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
demo
title>
src="">
script>
rel="stylesheet"
href="index.css">
head>
class="home">
class="home-list">
class="list-item">
href="/">
class="item-l">
src="../assets/images/check.png"
alt="">
待審核span>
div>
class="item-r isnew">6
div>
a>
div>
...div>
div>
body>
html>
12
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@function px2rem(好了，溜了溜了。。。$px,
$base-font-size: 75px)
.home-list
span
.item-r
}
&:link,&:visited,&:hover,&:active
}
}
}
移動端螢幕適配
rem單位介紹 rem font size of the root element 是相對長度單位。相對於根元素 即html元素 font size計算值的倍數 移動端主要根據iphone5來參考適配，在谷歌瀏覽器中，1rem 16px iphone5的寬度是320px,320 16 20 動態設定...
移動端螢幕適配
方法一 查詢 比如說我們設定了html，然後給具體的dom設定p，其實就相當於設定了p，也就是1rem 1 html的fontsize 2.5rem 2.5 html的fontsize html media only screen and min width 360px media only scr...
移動端螢幕適配 （ media ）
media screen and max width 300px media queries能在不同的條件下使用不同的樣式，使頁面在不同在終端裝置下達到不同的渲染效果。前面簡單的介紹了media queries如何引用到專案中，但media queries有其自己的使用規則。具體來說,media q...