媒體查詢
- @media：媒體查詢；可以針對不同的媒體類型定義不同的樣式
- only：指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器
- screen：用於電腦屏幕，平板電腦，智能手機等
- and前後一定要有空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
.box{
width: 100px; height: 100px;
background: red; margin: 100px auto;
}
/* 800及800以上時元素的樣式 */
/* @media only screen and (min-width: 800px){
.box{
background: green;
}
} */
/* 800及800以下時元素的樣式 */
/* @media only screen and (max-width: 800px){
.box{
background: green;
}
} */
/* 600到900之間的樣式 */
@media only screen and (min-width: 600px) and (max-width: 900px){
.box{
background: green;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
佈局視口
- viewport：視口；在css標準文檔中稱爲初始包含塊
- PC端指的是瀏覽器的可視區域
- 移動端指的就是viewport中的佈局視口
佈局視口
- 桌面上，視口與瀏覽器窗口的寬度一致，但在手機上，視口與移動端瀏覽器屏幕寬度是不關聯的
- 通常移動端的佈局視口默認被設置成了980px
- 如果網站沒有爲移動端優化，那麼瀏覽器會盡可能的縮小網頁，讓用戶能看到網頁的全貌
視覺視口
- 用戶正在看到的網頁的區域，注意是網頁的區域
- 如果用戶縮小網頁，我們看到的網頁區域將變大，此時視覺視口也變大
- 同理，用戶放大網頁，我們能看到的網頁區域將縮小，此時視覺視口也變小
- 不管用戶如果縮放，都不會影響到佈局視口的寬度
理想視口
- 理想視口指的是設備瀏覽器的顯示區域
- 移動端佈局視口的寬度應該與理想視口寬度一致
<!-- 只對移動端有效，PC端無效 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
三種像素
CSS像素
- 可以理解爲“直覺”像素，CSS和JS使用的抽象單位
- 瀏覽器內的一切長度都是以CSS像素爲單位的，CSS像素的單位是px
邏輯像素
- 邏輯像素又被稱爲設備獨立像素，比如iPhone6的邏輯像素是375x667
物理像素
- 物理像素又被稱爲設備像素，設備屏幕實際擁有的像素點，比如iPhone6的物理像素是750x1334
設備像素比
-
指的是設備以多少物理像素來顯示一個CSS像素
-
DPR = 設備像素 / 邏輯像素
-
在移動端，一般使用iPhone6的屏幕尺寸進行設計，設計圖寬度750px
vw和vh單位
相對於視口的寬度和高度，和父元素無關
- vw：1vw等於視口寬度的1%
- vh：1vh等於視口高度的1%
- vw並不是只用來設置寬度，vh並不是只用來設置高度
- vw和vh就是一種尺寸單位
- vw單位用得多，vh單位基本用不到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
html, body{
width: 100%; height: 100%;
}
div{
width: 50vw; height: 50vh;
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
vmin和vmax單位
- vmin：選取vw和vh中最小的那個
- vmax：選取vw和vh中最大的那個