移動端螢幕適配的解決

隨著手機硬體配置的飛速增長、螢幕尺寸的越來越大和網路頻寬的逐漸提公升，越來越多的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="">

script>

用px寫的是絕對單位，這種方法肯定不行。讓我們來擁抱rem吧！！！

我們知道 em 的計算是基於父級元素的，在實際使用中給我們的計算帶來了很大的不便。所以 rem 的出現解救了我這樣不會算術的人，再也不用擔心父級元素的 font-size 了，因為它始終是基於根元素（html） 的。

比如預設的 html font-size=16px，那麼我想設定12px 的文字就是：12÷16=0.75（rem）

剛剛我們引入了手淘的flexible，並給html加了font-size，如此一來，頁面中的元素，都可以通過rem單位來設定。他們會根據html元素的font-size值做相應的計算，從而實現螢幕的適配效果。

使用sass的同學，可以使用sass的函式、混合巨集這些功能來實現：

1

2 
3 

@function px2rem(

$px, 
$base-font-size: 75px) 

使用：

psd中量多少就寫多少

1

2 
3 
4 
5 

//比如量取box寬為190，高為190，則**：

.box 

因為這是商業**，所以就只貼了一部分**，忘見諒，謝謝

最下面有我開源專案的**，可以參考，如果對你有幫助的話，給個star。

1

2 
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>

1

2 
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...