移動web開發之rem佈局

一、rem基礎

rem單位

rem (root em)是一個相對單位，類似於em，em是父元素字體大小。

不同的是rem的基準是相對於html元素的字體大小。

比如，根元素（html）設置font-size=12px; 非根元素設置width:2rem; 則換成px表示就是24px。

/* 根html 爲 12px */
html {
   font-size: 12px;
}
/* 此時 div 的字體大小就是 24px */       
div {
    font-size: 2rem;
}

rem的優勢：父元素文字大小可能不一致，但是整個頁面只有一個html，可以很好來控制整個頁面的元素大小。

二、媒體查詢

2.1 什麼是媒體查詢

媒體查詢（Media Query）是CSS3新語法。

使用 @media查詢，可以針對不同的媒體類型定義不同的樣式
@media 可以針對不同的屏幕尺寸設置不同的樣式
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
目前針對很多蘋果手機、Android手機，平板等設備都用得到多媒體查詢

2.2 媒體查詢語法規範

用 @media開頭注意@符號
mediatype 媒體類型
關鍵字 and not only
media feature 媒體特性必須有小括號包含

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

1. mediatype 查詢類型

將不同的終端設備劃分成不同的類型，稱爲媒體類型

2. 關鍵字

關鍵字將媒體類型或多個媒體特性連接到一起做爲媒體查詢的條件。

and：可以將多個媒體特性連接到一起，相當於“且”的意思。
not：排除某個媒體類型，相當於“非”的意思，可以省略。
only：指定某個特定的媒體類型，可以省略。

3. 媒體特性

每種媒體類型都具體各自不同的特性，根據不同媒體類型的媒體特性設置不同的展示風格。我們暫且瞭解三個。

注意他們要加小括號包含

案例：根據頁面寬度改變背景變色
實現思路：
① 按照從大到小的或者從小到大的思路
② 注意我們有最大值 max-width 和最小值 min-width都是包含等於的
③ 當屏幕小於540像素，背景顏色變爲藍色（x <= 539）
④ 當屏幕大於等於540像素並且小於等於 969像素的時候背景顏色爲綠色 ( 540=<x <= 969）
⑤ 當屏幕大於等於 970像素的時候，背景顏色爲紅色（ x >= 970）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
		<title></title>
		<style type="text/css">
			/* 這句話的意思就是:在我們屏幕上並且最大寬度是 800px,設置我們想要的樣式
			max-width 最大寬度爲800px,小於等於800px */
			
			/* 媒體查詢可以根據不同的屏幕尺寸來設置不同的樣式 */
			
			/* 寬度小於540px時,背景顏色變爲粉色 */
			@media screen and (max-width: 539px){
				body {
					background-color: blue;
				}
			}
			
			/* 寬度540~970時,背景顏色變爲紫色 */
			/* @media screen and (min-width: 540px) and (max-width: 969px){
				body {
					background-color: green;
				}
			} */
			@media screen and (min-width: 540px){
				body {
					background-color: green;
				}
			}
			
			
			
			/* 寬度大於970px時,背景顏色變爲紅色 */
			@media screen and (min-width: 970px) {
				body {
					background-color: red;
				}
			}
		</style>
	</head>
	<body>
		
		
	</body>
</html>

4. 媒體查詢書寫規則

screen還有and必須帶上不能省略的
我們的數字後面必須跟單位970px,這個px不能省略的

注意：爲了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫，這樣代碼更簡潔。

媒體查詢從小到大優勢代碼分析:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
		<title></title>
		<style type="text/css">
			/* 這句話的意思就是:在我們屏幕上並且最大寬度是 800px,設置我們想要的樣式
			max-width 最大寬度爲800px,小於等於800px */
			
			/* 媒體查詢可以根據不同的屏幕尺寸來設置不同的樣式 */
			
			/* 寬度小於等於800px時,背景顏色變爲粉色 */
			@media screen and (max-width: 800px){
				body {
					background-color: pink;
				}
			}
			
			/* 寬度小於等於500px時,背景顏色變爲紫色 */
			@media screen and (max-width: 500px){
				body {
					background-color: purple;
				}
			}
		</style>
	</head>
	<body>
		
		
	</body>
</html>

2.3 媒體查詢+rem實現元素動態大小變化

rem單位是跟着html來走的，有了rem頁面元素可以設置不同大小尺寸
媒體查詢可以根據不同設備寬度來修改樣式
媒體查詢+rem 就可以實現不同設備寬度，實現頁面元素大小的動態變化

案例：媒體查詢+rem實現元素變化:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			/* html {
				font-size: 100px;
			} */
			
			* {
				margin: 0;
				padding: 0;
			}
			.top {
				height: 1rem;
				font-size: .5rem;
				background-color: green;
				color: #fff;
				text-align: center;
				line-height: 1rem; /* 行高等於高度即可實現文字垂直居中的效果 */
			}
			
			/* 從小到大的順序 */
			@media screen and (min-width:320px) {
				html {
					font-size: 50px;
				}	
			}
			
			@media screen and (min-width:640px) {
				html {
					font-size: 100px;
				}	
			}
		</style>
	</head>
	<body>
		<div class="top">購物車</div>
	</body>
</html>

2.4 引入資源（理解）

當樣式比較繁多的時候，我們可以針對不同的媒體使用不同 stylesheets（樣式表）。
原理，就是直接在link中判斷設備的尺寸，然後引用不同的css文件。

語法規範

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
```html
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

示例

style640.css文件：

div {
	float: left;
	width: 50%;
	height: 100px;
}

div:nth-child(1) {
	background-color: pink;
}

div:nth-child(2) {
	background-color: purple;
}

style320.css文件：

div {
	width: 100%;
	height: 100px;
}

div:nth-child(1) {
	background-color: pink;
}

div:nth-child(2) {
	background-color: purple;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 當屏幕大於等於640ox以上時,讓div一行顯示2個 */
			/* 當屏幕小於640px時,讓div一行顯示1個 */
			/* 	一個建議:媒體查詢最好的代碼書寫方法是"從小到大” */
			/* 引入資源就是 針對不同的屏幕尺寸 調用不同的css文件 */
		</style>
		<link rel="stylesheet" type="text/css" href="./css/style320.css" media="screen and (min-width:320px)"/>
		<link rel="stylesheet" type="text/css" href="./css/style640.css" media="screen and (min-width:640px)"/>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
	</body>
</html>

三、less 基礎

3.1 維護css弊端

CSS 是一門非程序式語言，沒有變量、函數、SCOPE（作用域）等概念。

CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗餘度是比較高的。
不方便維護及擴展，不利於複用。
CSS 沒有很好的計算能力
非前端開發工程師來講，往往會因爲缺少 CSS 編寫經驗而很難寫出組織良好且易於維護的 CSS 代碼項目。

3.2 Less 介紹

Less（LeanerStyle Sheets 的縮寫）是一門 CSS擴展語言，也成爲CSS預處理器。

做爲 CSS的一種形式的擴展，它並沒有減少CSS的功能，而是在現有的CSS語法上，爲CSS加入程序式語言的特性。

它在CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，並且降低了 CSS的維護成本，就像它的名稱所說的那樣，Less可以讓我們用更少的代碼做更多的事情。

Less中文網址：http://less css.cn/

常見的CSS預處理器：Sass、Less、Stylus

一句話：Less是一門 CSS 預處理語言，它擴展了CSS的動態特性。

Less安裝

①安裝nodejs，可選擇版本(8.0)，網址：http://nodejs.cn/download/

②檢查是否安裝成功，使用cmd命令（win10是window+r 打開運行輸入cmd） —輸入“node –v”查看版本即可

③基於nodejs在線安裝Less，使用cmd命令“npm install -g less”即可

④檢查是否安裝成功，使用cmd命令“ lessc -v ”查看版本即可

3.4 Less 使用之變量

變量是指沒有固定的值，可以改變的。因爲我們CSS中的一些顏色和數值等經常使用。

@變量名:值;

必須有@爲前綴
不能包含特殊字符
不能以數字開頭
大小寫敏感

@color: pink;

3.5 Less 編譯

vocode Less 插件

Easy LESS 插件用來把less文件編譯爲css文件

安裝完畢插件，重新加載下 vscode。

只要保存一下Less文件，會自動生成CSS文件。

3.6 Less 嵌套

// 將css改爲less
#header .logo {
  width: 300px;
}

#header {
    .logo {
       width: 300px;
    }
}

如果遇見（交集|僞類|僞元素選擇器），利用&進行連接

a:hover{
    color:red;
}
a{
  &:hover{
      color:red;
  }
}

3.7 Less 運算

任何數字、顏色或者變量都可以參與運算。就是Less提供了加（+）、減（-）、乘（*）、除（/）算術運算。


/*Less 裏面寫*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至還可以這樣 */
width: (@width + 5) * 2;

乘號（*）和除號（/）的寫法
運算符中間左右有個空格隔開 1px + 5
對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位
如果兩個值之間只有一個值有單位，則運算結果就取該單位

四、rem適配方案

1.讓一些不能等比自適應的元素，達到當設備尺寸發生改變的時候，等比例適配當前設備。

2.使用媒體查詢根據不同設備按比例設置html的字體大小，然後頁面元素使用rem做尺寸單位，當html字體大小變化元素尺寸也會發生變化，從而達到等比縮放的適配。

技術方案：

1.less+rem+媒體查詢

2.lflexible.js+rem

總結：

兩種方案現在都存在。

方案2 更簡單，現階段大家無需瞭解裏面的js代碼。

rem實際開發適配方案1

①假設設計稿是750px

②假設我們把整個屏幕劃分爲15等份（劃分標準不一可以是20份也可以是10等份）

③每一份作爲html字體大小，這裏就是50px

④那麼在320px設備的時候，字體大小爲320/15就是 21.33px

⑤用我們頁面元素的大小除以不同的 html字體大小會發現他們比例還是相同的

⑥比如我們以750爲標準設計稿

⑦一個100100像素的頁面元素在 750屏幕下，就是 100/ 50 轉換爲rem 是 2rem2rem 比例是1比1

⑧320屏幕下， html字體大小爲21.33 則 2rem= 42.66px 此時寬和高都是 42.66 但是寬和高的比例還是 1比1

⑨但是已經能實現不同屏幕下頁面元素盒子等比例縮放的效果

總結：

①最後的公式：頁面元素的rem值 = 頁面元素值（px） / （屏幕寬度 / 劃分的份數）

②屏幕寬度/劃分的份數就是 htmlfont-size 的大小

③或者：頁面元素的rem值 = 頁面元素值（px） / html font-size 字體大小

五、蘇寧首頁

蘇寧首頁地址：蘇寧首頁

1、技術選型

方案：我們採取單獨製作移動頁面方案

技術：佈局採取rem適配佈局（less + rem + 媒體查詢）

設計圖：本設計圖採用 750px 設計尺寸

2、搭建文件結構

3、設置視口標籤以及引入初始化樣式

<meta name="viewport" content="width=device-width, user-scalable=no,         initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" href="css/normalize.css">

4、設置公共common.less文件

新建common.less 設置好最常見的屏幕尺寸，利用媒體查詢設置不同的html字體大小，因爲除了首頁其他頁面也需要
我們關心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
劃分的份數我們定爲 15等份
因爲我們pc端也可以打開我們蘇寧移動端首頁，我們默認html字體大小爲 50px，注意這句話寫到最上面

六、rem 適配方案2

手機淘寶團隊出的簡潔高效移動端適配庫

我們再也不需要在寫不同屏幕的媒體查詢，因爲裏面js做了處理

它的原理是把當前設備劃分爲10等份，但是不同設備下，比例還是一致的。

我們要做的，就是確定好我們當前設備的html 文字大小就可以了

比如當前設計稿是 750px，那麼我們只需要把 html 文字大小設置爲 75px(750px / 10) 就可以

裏面頁面元素rem值：頁面元素的px 值 / 75

剩餘的，讓flexible.js來去算

github地址：https://github.com/amfe/lib-flexible

總結：

因爲flexible是默認將屏幕分爲10等分

但是當屏幕大於750的時候希望不要再去重置html字體了

所以要自己通過媒體查詢設置一下

並且要把權重提到最高

VSCode px 轉換rem 插件 cssrem

因爲cssrem中css自動轉化爲rem是參照默認插件的16轉換的所以需要自己配置

移動web開發之rem佈局（rem基礎、媒體查詢、 less 基礎、rem適配方案）

移動web開發之rem佈局

一、rem基礎

rem單位

二、媒體查詢

2.1 什麼是媒體查詢

2.2 媒體查詢語法規範

2.3 媒體查詢+rem實現元素動態大小變化

2.4 引入資源（理解）

三、less 基礎

3.1 維護css弊端

3.2 Less 介紹

3.4 Less 使用之變量

3.5 Less 編譯

3.6 Less 嵌套

3.7 Less 運算

四、rem適配方案

rem實際開發適配方案1

五、蘇寧首頁

六、rem 適配方案2

六、Numpy的使用（詳解）

python網絡爬蟲系列（二）——ProxyHandler處理器實現代理IP

十一、加權線性迴歸案例：預測鮑魚的年齡

CSMA/CD協議（先聽再說，邊聽邊說）

十二、案例：加利福尼亞房屋價值數據集（多元線性迴歸）& Lasso & 嶺迴歸 & 分箱處理非線性問題 & 多項式迴歸

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

移動web開發之rem佈局（rem基礎、媒體查詢、 less 基礎、rem適配方案）

移動web開發之rem佈局

一、rem基礎

rem單位

二、 媒體查詢

2.1 什麼是媒體查詢

2.2 媒體查詢語法規範

2.3 媒體查詢+rem實現元素動態大小變化

2.4 引入資源（理解）

三、less 基礎

3.1 維護css弊端

3.2 Less 介紹

3.4 Less 使用之變量

3.5 Less 編譯

3.6 Less 嵌套

3.7 Less 運算

四、rem適配方案

rem實際開發適配方案1

五、 蘇寧首頁

六、rem 適配方案2

二、媒體查詢

五、蘇寧首頁