+ [HTML常用標籤總結](https://blog.csdn.net/weixin_43461520/article/details/110143997) + [手摸手帶你學CSS](https://blog.csdn.net/weixin_43461520/article/details/111827457) + [HTML5與CSS3知識點總結](https://blog.csdn.net/weixin_43461520/article/details/113201713) + [手摸手帶你學移動端WEB開發](https://blog.csdn.net/weixin_43461520/article/details/113785278) > **好好學習，天天向上** > > 本文已收錄至我的Github倉庫[**DayDayUP**](https://github.com/RobodLee/DayDayUP)：github.com/RobodLee/DayDayUP，歡迎Star > > [⭐⭐⭐⭐⭐`轉載請註明出處！`⭐⭐⭐⭐⭐](https://blog.csdn.net/weixin_43461520/article/details/113785278) > > [連結：https://blog.csdn.net/weixin_43461520/article/details/113785278](https://blog.csdn.net/weixin_43461520/article/details/113785278) > > [⭐⭐⭐⭐⭐**轉載請註明出處！**⭐⭐⭐⭐⭐](https://blog.csdn.net/weixin_43461520/article/details/113785278) ## 視口 視口就是瀏覽器顯示頁面內容的螢幕區域。視口分為**佈局視口**、**視覺視口**和**理想視口**。 #### 佈局視口 layout viewport 佈局視口是移動裝置的瀏覽器預設設定的一個視口，用於解決早期的PC端頁面在手機上顯示的問題，一般這個視口預設的解析度是**980px**，這種情況下元素顯示得都比較小，需要手動縮放網頁才能看清。  #### 視覺視口 visual viewport 視覺視口指的是使用者**正在看到**的**網頁的區域**，可以通過縮放去操作視覺視口，但不會影響到佈局視口，佈局視口仍保持原來的寬度。  #### 理想視口 ideal viewport 前兩種視口的閱讀體驗都不太好，仍然需要手動縮放網頁才能將頁面內容看清，而理想視口則是最理想的視口尺寸，簡單的說就是裝置有多寬，佈局的視口就有多寬，小米商城京東等網站的手機網頁版都是理想視口，我們不需要縮放視窗就可以將頁面內容看清。  #### mate視口標籤 ```html ``` 其中，**name=“viewport”**表示這是一個視口標籤，**content**用於宣告某些屬性，常用屬性有