• view：是“看”的意思

• Port：是“端口”的意思

• Viewport：翻譯為“視口”陌兑。

• viewport是沒(méi)有大小的。就是viewport不等于網(wǎng)頁(yè)可見(jiàn)區(qū)域的大小由捎。

• 視口可以通過(guò)<meta>標(biāo)簽設(shè)置

• 如果沒(méi)有設(shè)置兔综，則按照默認(rèn)980設(shè)置

設(shè)置viewport

可以通過(guò)<meta>標(biāo)簽設(shè)置移動(dòng)端視口的大小和縮放。它的語(yǔ)法是：

<meta name='viewport' content='寬度/高度 初始比例 最大比例 最小比例 是否縮放'>

五個(gè)屬性值

1.width/height：設(shè)置視口的寬度或高度狞玛。

注意：如果不設(shè)置視口软驰，那么iOS的視口默認(rèn)為980px寬

示例：屬性值為數(shù)值，無(wú)單位心肪。表示視口的寬度為375px

<meta name='viewport' content='width=375'>

示例：屬性值為device-width锭亏。表示把視口的寬度設(shè)置為設(shè)備可視域?qū)挕?/p>

<meta name='viewport' content='width=device-width'>

2.initial-scale:設(shè)置視口的初始比例。

語(yǔ)法:

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

屬性值：0.1-1

默認(rèn)值：1

0.1-1：表示縮小

1-10：表示放大

3.maximum-scale：設(shè)置視口最大縮放比

<meta name="viewport" content="width=device-width,initial-scale=1硬鞍，minimum-scale=1,maximum-scale=10" />

4minimum-scale：設(shè)置視口最小縮放比

<meta name="viewport" content="width=device-width,initial-scale=1慧瘤，minimum-scale=2" />

5user-scalable：設(shè)置視口是否允許縮放

<meta name="viewport" content="width=device-width,initial-scale=1戴已，minimum-scale=1,maximum-scale=5,user-scalable=0" />

媒體查詢是什么

• 媒體查詢是一種查詢用戶設(shè)備和設(shè)備特性的技術(shù)锅减。

• 媒體查詢是由media屬性和@media規(guī)則構(gòu)成糖儡。以下三種用法，都可以實(shí)現(xiàn)相同的效果上煤。

  • medla屬性設(shè)置在<style>標(biāo)簽上

  • meala屬性可以設(shè)置在<link>標(biāo)簽上

  • @meida規(guī)則設(shè)置在樣式表里

• 通過(guò)媒體查詢休玩，我們可以查詢到用戶設(shè)備類(lèi)型和設(shè)備特性。

• 常見(jiàn)設(shè)備類(lèi)型

  • screen ：所有有電子屏幕設(shè)備

  • print ：打印機(jī)

  • speech ：閱讀器

  • handle ：手持設(shè)備

  • all ：所有設(shè)備

• 常見(jiàn)的設(shè)備特性

  • width

  • height

  • orientation

  • hover劫狠、

  • resolution

  • aspect-ratio

媒體查詢的語(yǔ)法

media屬性

<style media='查詢規(guī)則'>
</style>

media屬性

<link href='print.css' media='查詢規(guī)則'>
<link href='screen.css' media='查詢規(guī)則'>

@media規(guī)則

/*CSS文件*/
@media 查詢規(guī)則{
    /*這里寫(xiě)代碼*/
}

查詢規(guī)則

• 查詢規(guī)則由媒體類(lèi)型+媒體特性表達(dá)式構(gòu)成拴疤。

• 媒體類(lèi)型和媒體特性表達(dá)式使用邏輯操作符(and、not独泞、only呐矾、,)連接，操作符前后必須有空格懦砂。

• 所有的媒體特性表達(dá)性必須用小括號(hào)括起來(lái)

• 不區(qū)分大小寫(xiě)蜒犯。

示例

/*在橫向屏幕設(shè)備上，讓body的背景色顯示為紅色*/
/*在豎向屏幕設(shè)備上荞膘，讓body的背景色顯示為藍(lán)色*/
/*landscape：橫屏*/
@media screen and (orientation:landscape){
    body{
        background-color:red;
    }
}
/*portrait：豎屏*/
@media screen and (orientation:portrait){
    body{
        background-color:blue;
    }
}

/*是否支持輸入設(shè)備的懸停效果*/
<style media="<hover:hover)">
a:hover{
    color:white;
    background-color:red
};
</style>

示例：斷點(diǎn)修改背景色

/*查詢視口范圍min罚随，查詢max范圍將順序反過(guò)來(lái)*/
<style>
      header,
      footer {
        background-color: black;
        color: #fff;
        height: 100px;
      }
      body{
        background-color: blueviolet;
      }
      @media screen and (min-width:576px){
        body{
            background-color: blueviolet;
        }
      }
      @media screen and (min-width:768px){
        body{
            background-color: goldenrod;
        }
      }
      @media screen and (min-width:992px){
        body{
            background-color: palevioletred;
        }
      }
      @media screen and (min-width:1200px){
        body{
            background-color: blue;
        }
      }
      @media screen and (min-width:1400px){
        body{
            background-color: greenyellow;
        }
      }
</style>

復(fù)習(xí)JS

js的三個(gè)組成部分

• ECMAScript：ES

• DOM：文檔對(duì)象模型：就是一些文檔方法的集合。讓你通過(guò)這些方法可以操作文檔羽资。

• BOM：瀏覽器對(duì)象模型：就是一些與瀏覽器有關(guān)的方法集合淘菩。讓你通過(guò)這些方法可以操作瀏覽器窗口。

window.devicePixelRatio

• device：設(shè)備

• Pixel：像素

• Ratio：比例

• devicePixelRatio：設(shè)備像素比