視口viewport

1、viewport

1. 何爲視口？ 視口是瀏覽器顯示網頁的矩形區域。

2. 默認視口：模擬一個大約1000像素寬的視口。

理想視口：因設備、操做系統、瀏覽器而異，通常而言，手機寬帶大約在300～500像素之間（iphone 5寬度320像素），平板寬度在800～1400像素

可見視口：瀏覽器窗口減掉全部按鈕、工做條、滾動條等組件以後，實際包含網頁內容的空間。

佈局視口：放大網頁後某些部分會跑到可見視口以外。咱們看到的那部分爲可見視口，而假想的約束「整個頁面」的矩形區爲佈局視口。

<meta name="viewport" content="width=device-width, initial-scale=1">

2、像素

設備像素：設備屏幕的物理像素。任何設備的物理像素都是固定的。

css像素：邏輯像素，在css和javascript中使用的一個抽象的層。

每個CSS聲明和幾乎全部的javascript屬性都使用CSS像素，所以實際上歷來用不上設備像素 ，惟一的例外是screen.width和screen.height.

縮放

在桌面端，css的1個像素每每都是對應着電腦屏幕的1個物理像素。

　　//一個CSS像素徹底覆蓋了一個設備像素　

　

　　而在手機端，因爲屏幕尺寸的限制，縮放是常常性的操做。

　　//設備像素(深藍色背景)、CSS像素(半透明背景)
　　//左圖表示當用戶進行縮小操做時，一個設備像素覆蓋了多個CSS像素
　　//右圖表示當用戶進行放大操做時，一個CSS像素覆蓋了多個設備像素

 

不論咱們進行縮小或放大操做，元素設置的CSS像素(如width:300px)是始終不變的，而一個CSS像素對應多少個設備像素是根據當前的縮放比例來決定的。

 DPR(devicePixelRatio)

DPR = 設備像素 / css像素

CSS像素對應着之後要提到的理想視口，其對應的javascript屬性是screen.width/screen.height

而設備像素比DPR也有對應的javascript屬性window.devicePixelRatio

以iphone5爲例，iphone5的CSS像素爲320px*568px，DPR是2，因此其設備像素爲640px*1136px。

640(px) / 320(px)  = 2
1136(px) / 568(px) = 2
640(px)*1136(px) /  320(px)*568(px) = 4

 3、媒體查詢

1. <link>標籤

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

2. css文件中經過@media進行媒體查詢

@media screen and (min-width: 600px) {
/* 寫規則 */
}