網頁自動适配移動端? - 視口就是屏幕中用來顯示網頁的區域 - 可以通過查看視口的大小，來觀察CSS像素和物理像素的比值 - 默認情況下： 視口寬度 1920px（CSS像素） 1920px（物理像素） - 此時，css像素和物理像素的比是 1:1，下面我們就來聊聊關于網頁自動适配移動端?接下來我們就一起去了解一下吧!

網頁自動适配移動端

- 視口就是屏幕中用來顯示網頁的區域 - 可以通過查看視口的大小，來觀察CSS像素和物理像素的比值 - 默認情況下： 視口寬度 1920px（CSS像素） 1920px（物理像素） - 此時，css像素和物理像素的比是 1:1

• 放大兩倍的情況： 視口寬度 960px（CSS像素） 1920px（物理像素）
• 此時，css像素和物理像素的比是1:2
• - 我們可以通過改變視口的大小，來改變CSS像素和物理像素的比值

視口比

https://material.io/resources/devices/

表示的是視口的寬度（viewport width）

• 100vw = 一個視口的寬度
• 1vw = 1%視口寬度

vw這個單位永遠相當于視口寬度進行計算

設計圖的寬度 750px 1125px 設計圖 750px 使用vw作為單位 100vw 創建一個 48px x 35px 大小的元素 100vw = 750px(設計圖的像素) 0.1333333333333333vw = 1px 6.4vw = 48px(設計圖像素) 4.667vw = 35px

網頁中字體大小最小是12px，不能設置一個比12像素還小的字體如果我們設置了一個小于12px的字體，則字體自動設置為12

0.1333333vw = 1px 5.3333vw = 40px

rem 1 rem = 1 html的字體大小 1 rem = 40 px(設計圖)

• 語法：@media 查詢規則{} 媒體類型： all 所有設備 print 打印設備 screen 帶屏幕的設備 speech 屏幕閱讀器
• 可以使用,連接多個媒體類型，這樣它們之間就是一個或的關系
• 可以在媒體類型前添加一個only，表示隻有。 only的使用主要是為了兼容一些老版本浏覽器

@media print,screen{ body{ background-color: #bfa; }

@media only screen { body{ background-color: #bfa; } }

• 響應式布局
• 網頁可以根據不通的設備或窗口大小呈現出不同的效果
• 使用響應式布局，可以使一個網頁适用于所有設備
• 響應布局的關鍵就是 媒體查詢
• 通過媒體查詢，可以為不通的設備，或設備不同狀态來分别設置樣式
• 媒體特性： width 視口的寬度 height 視口的高度
• min-width 視口的最小寬度（視口大于指定寬度時生效） max-width 視口的最大寬度（視口小于指定寬度時生效）

@media (max-width: 500px){ body{ background-color: #bfa; } }

• 樣式切換的分界點，我們稱其為斷點，也就是網頁的樣式會在這個點時發生變化一般比較常用的斷點
• 小于768 超小屏幕 max-width=768px 大于768 小屏幕 min-width=768px 大于992 中型屏幕 min-width=992px 大于1200 大屏幕 min-width=1200px

@media only screen and (min-width: 500px) and (max-width:700px){ body{ background-color: #bfa; } }

• 屏幕是由一個一個發光的小點構成，這一個個的小點就是像素
• 分辨率：1920 x 1080 說的就是屏幕中小點的數量
• 在前端開發中像素要分成兩種情況讨論：CSS像素 和 物理像素
• 物理像素，上述所說的小點點就屬于物理像素
• CSS像素，編寫網頁時，我們所用像素都是CSS像素
• 浏覽器在顯示網頁時，需要将C SS像素轉換為物理像素然後再呈現 一個css像素最終由幾個物理像素顯示，由浏覽器決定：默認情況下在pc端，一個css像素 = 一個物理像素

• 設置視口大小 device-width表示設備的寬度（完美視口）

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

• 移動端默認的視口大小是980px(css像素)，
• 默認情況下，移動端的像素比就是 980/移動端寬度 （980/750）如果我們直接在網頁中編寫移動端代碼，這樣在980的視口下，像素比是非常不好， 導緻網頁中的内容非常非常的小
• 編寫移動頁面時，必須要确保有一個比較合理的像素比： 1css像素 對應 2個物理像素 1css像素 對應 3個物理像素
• 可以通過meta标簽來設置視口大小

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

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!