移動端佈局四： rem適配佈局，em和rem介紹，媒體查詢顯示不同樣式，媒體查詢呼叫不同css樣式

阿新 • • 發佈：2020-10-14

學習目標

能夠使用rem單位
能夠使用媒體查詢的基本語法
能夠使用Less的基本語法
能夠使用Less中的巢狀
能夠使用Less中的運算
能夠使用2種rem適配方案
能夠獨立完成蘇寧移動端首頁

解決方案

1.頁面佈局文字能否隨著螢幕大小變化而變化?
2.流式佈局和flex佈局主要針對於寬度佈局,那高度如何設定?
3.怎麼樣讓螢幕發生變化的時候元素高度和寬度等比例縮放?

一、em 和 rem

rem單位

rem (root em)是一個相對單位,類似於em , em是父元素字型大小。
不同的是rem的基準是相樹對於html元素的字型大小。
比如,根元素( html )設定font size= 12px;非根元素設定width:2rem;則換成px表示就是24px.

例項

<style>
html{font-size: 14px;}
div{font-size: 12px;}

/* 1. em相對於父元素的字型大小來說的*/ 
div p:nth-child(1){
	width: 10em;
	height: 10em;
	background-color: blue;
}

/*2. rem相對於htm1元素字型大小來說的*/
div p:nth-child(2){
	width: 10rem;
	height: 10rem;
	background-color: skyblue;
}
</style>
<div>
	<p></p>
	<p></p>
</div>

效果：用em的第一個span是120px，相對於div字型大小10倍；用rem的第二個span是140px，相對於html的字型大小10倍；

二、媒體查詢

媒體查詢( Media Query )是CSS3新語法。

使用 @media查詢,可以針對不同的媒體型別定義不同的樣式
@media 可以針對不同的螢幕尺寸設定不同的樣式

當你重置瀏覽器大小的過程中。頁面也會根據瀏覽器的寬度和高度重新植染頁面

目前針對很多蘋果手機。 Android手機 ,平板等裝置都用得到多媒體查詢

2.2語法規範

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

1. 用@media開頭注意@符號

2. mediatype媒體型別

將不同的終端裝置劃分成不同的型別,稱為媒體型別

值	解釋說明
all	用於所有裝置
print	用於印表機和列印預覽
scree	用於電腦螢幕，平板電腦，智慧手機等

3. 關鍵字and not only

關鍵字將媒體型別或多個媒體特性連線到一起做為媒體查詢的條件。

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

4. media feature媒體特性必須有小括號包含

每種媒體型別都具體各自不同的特性,根據不同媒體型別的媒體特性設定不同的展示風格。我們暫且瞭解三個。
注意他們要加小括號包含

值	解釋說明
width	定義輸出裝置中頁面可見區域的寬度
min-width	定義輸出裝置中頁面最小可見區域寬度
max-width	定義輸出裝置中頁面最大可見區域寬度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>媒體查詢</title>
</head>
<style>
/*這句話的意思就是:在我們螢幕上 並且最大的寬度是500畫素設定我們想要的樣式*/
/*即：當螢幕寬度小於500時，顏色為紫色*/
@media screen and (max-width: 500px) {
	body{background-color: purple;}
}

/*即：當螢幕寬度大於800時顏色為粉色*/
@media screen and (min-width: 800px) {
	body{
		background-color: pink;
	}
}
</style>	
<body>
</body>
</html>

5.引入資源(根據不同螢幕引入不同樣式)

當樣式比較繁多的時候,我們可以針對不同的媒體使用不同stylesheets (樣式表) .
原理,就是直接在link中判斷裝置的尺寸,然後引用不同的css檔案。
螢幕最好從小到大寫

<link rel="stylesheet" media="screen and (min-width:320px)" href="style320.css">
<link rel="stylesheet" media="screen and (min-width:640px)" href="style320.css">

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

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

例項：根據螢幕大小，購物車按鈕高度不同，字型也不同（相對於html字號按比例縮放）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
*{
	margin: 0;
	padding: 0;
}

/*1.螢幕大於320px時html字型大小為50px（320以下的不考慮）
---注意min-width按從小到大寫有助少寫程式碼*/
@media screen and (min-width:320px)	{
	html{font-size: 50px;}
}
/*2.螢幕大於640px時根字型大小100px*/
@media screen and (min-width:640px){
	html{font-size: 100px;}
}

/*3.top的高為html字型的1倍，內部的字型為html字型的0.5倍
這樣就會根據螢幕不同，而導致html字型變成1或2步大小，此處也自動跟著變*/
.top{
	height: 1rem;
	font-size: .5rem;
	background-color: green;
	color: white;

	/*水平垂直居中*/
	line-height: 1rem;
	text-align:center;

}
</style>
<body>
	<div class="top">購物車</div>
</body>
</html>