思考
1.頁面布局文字能否隨著屏幕大小變化而變化？
2.流式布局和flex布局主要針對(duì)于寬度布局，那高度如何設(shè)置？
3.怎么樣讓屏幕發(fā)生變化的時(shí)候元素高度和寬度等比例縮放？
1.rem基礎(chǔ)
rem（root em）是一個(gè)相對(duì)單位。類似于em，em是父元素字體大小。
不同的是rem的基準(zhǔn)是相對(duì)于html元素的字體大小。
比如，根元素（html）設(shè)置font-size:12px; 非根元素設(shè)置width:2rem；則換成px表示就是24px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
font-size: 12px;
}
div{
font-size: 12px;
width: 15rem;
height: 15rem;
background-color: pink;
}
p{
/* 1. em相對(duì)于父元素的字體大小來說的*/
/* width: 10em;
height:10em; */
/* 2. rem相對(duì)于html元素字體大小來說的*/
width: 10rem;
height: 10rem;
background-color: pink;
/* 3. rem的優(yōu)點(diǎn)就是可以通過修改html里面的字體大小來改變頁面中元素的大小可以整體控制*/
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
上面的代碼html文字大小是固定的，那如何在不同設(shè)備屏幕尺寸的寬度修改html文字大小呢？
2.媒體查詢
2.1 媒體查詢（Media Query）是CSS3新語法
-
使用@media查詢，可以針對(duì)不同的媒體類型定義不同的樣式
@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式
當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面
2.2 語法規(guī)范
@media mediatype and|not|only (media feature) {
CSS-Code;
}
- 用@media 開頭 注意@符號(hào)
- mediatype 媒體類型
- 關(guān)鍵字and not only
- media feature 媒體特性 必須有小括號(hào)包含
2.2.1 mediatype查詢類型
將不同的終端設(shè)備劃分不同的類型，稱為媒體類型
all:用于所有設(shè)備
print:用于打印機(jī)和打印預(yù)覽
screen:用于電腦屏幕，平板電腦，智能手機(jī)等
2.2.2 關(guān)鍵字
關(guān)鍵字將媒體類型或多個(gè)媒體特性連接到一起做為媒體查詢的條件。
- and: 可以將多個(gè)媒體特性連接到一起，相當(dāng)于 “且”的意思。
- not: 排除某個(gè)媒體類型，相當(dāng)于“非”的意思，可以參略。
- only: 指定某個(gè)特定的媒體類型，可以省略。
2.2.3 媒體特性
每種媒體類型都具備各自不同的特性，根據(jù)不同媒體類型的媒體特性設(shè)置不同的展示風(fēng)格，我們暫且了解三個(gè)。
注意他們要加小括號(hào)包含
width :定義輸出設(shè)備中頁面可見區(qū)域的寬度 |
min-width : 定義輸出設(shè)備中頁面最小可見區(qū)域?qū)挾?br>
max-width : 定義輸出設(shè)備中頁面最大可見區(qū)域?qū)挾?|
舉例：
<style>
/* @media mediatype and|not|only (media feature) {
CSS-Code;
} */
/* 在我們屏幕上 并且 最大寬度是800像素 設(shè)置我們想要的樣式 */
/* 如果在電腦屏幕上顯示，且顯示寬度小于等于800px，就將body的樣式改成pink色 */
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
@media screen and (max-width: 500px) {
body {
background-color: purple;
}
}
/* 若這兩個(gè)media交換順序，那么紫色就會(huì)被覆蓋 */
</style>
2.3 媒體查詢+rem實(shí)現(xiàn)元素動(dòng)態(tài)大小變化
rem單位是跟著html來走的，有了rem頁面元素可以設(shè)置不同大小尺寸
媒體查詢可以根據(jù)不同設(shè)備寬度來修改樣式
媒體查詢+rem 就可以實(shí)現(xiàn)不同設(shè)備寬度，實(shí)現(xiàn)頁面元素大小的動(dòng)態(tài)變化
<style>
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
.top {
height: 1rem;
/* 這里的文字大小設(shè)置為html文字大小的一半 */
font-size: .5rem;
background-color: green;
color: #fff;
text-align: center;
/* 文字垂直居中 */
line-height: 1rem;
}
/* 這里可以保證字體高度(大小)是盒子高度的一半 */
</style>
2.4 引入資源
當(dāng)樣式比較多的時(shí)候，我們可以針對(duì)不同的媒體使用不同的sylesheets(樣式)，原理就是直接在link中判斷設(shè)備的尺寸，然后引用不同的CSS文件。比如可以為大屏幕寫一個(gè)樣式，為小屏幕也寫一個(gè)樣式，然后在引入文件的時(shí)候?qū)ζ聊淮笮∽龀雠袛?，判斷引入大屏幕的樣式還是小屏幕的樣式。
語法規(guī)范：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
舉例：
<style>
/* 引入資源即：針對(duì)不同的屏幕尺寸 調(diào)用不同的css文件 */
/* 當(dāng)我們屏幕大于等于640px以上的，我們讓div一行顯示兩個(gè) */
/* 當(dāng)我們屏幕小于640 我們讓div一行顯示一個(gè) */
/* 媒體查詢最好的方法是從小到大 */
</style>
<!-- <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"> -->
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
<body>
<div>1</div>
<div>2</div>
</body>
3. 項(xiàng)目中實(shí)際使用
設(shè)計(jì)稿是這樣的一個(gè) 1920 * 1280（16：9）的圖:
function setRem () {
// 基準(zhǔn)大小
baseSize = 100;
let basePc = baseSize / 1920; //表示1920的設(shè)計(jì)圖,使用100PX的默認(rèn)值
let vW = window.innerWidth; // 當(dāng)前窗口的寬度
let rem = vW * basePc; // 以默認(rèn)比例值乘以當(dāng)前窗口寬度,得到該寬度下的相應(yīng)font-size值
document.documentElement.style.fontSize = rem + "px";
}
// 初始化
setRem();
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
setRem()
};
