響應式布局的理解與認知
時間：2023-09-03 01:54:01 | 來源：網(wǎng)站運營
時間：2023-09-03 01:54:01 來源：網(wǎng)站運營
響應式布局的理解與認知：隨著互聯(lián)網(wǎng)的快速發(fā)展，HTML5迅速崛起，響應式布局也慢慢的被廣泛的運用起來，身為Web前端人員，我覺得必須要掌握“
響應式布局”。
響應式布局，簡單點說就是做一個網(wǎng)站而能多終端多平臺運行的由一個網(wǎng)站轉(zhuǎn)化為多個網(wǎng)站，為我們大大節(jié)省了資源。
那么響應式布局有什么優(yōu)缺點呢？
優(yōu)點：1.響應式布局面對不同的分辨率設備靈活性強。
2.能夠快捷解決多設備顯示適應問題。
缺點：
1.兼容各種設備工作量大，效率低下。
2.代碼累贅，會出現(xiàn)隱藏無用的元素，加載時間加長。
3.其實這是一種折衷性質(zhì)的設計解決方案，多方面因素影響而達不到最佳效果。
4.一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況。
可能有些人還是不明白響應式布局應該怎么去做，以及它的開發(fā)原理是什么？
原理：簡單點說響應式布局它是通過CSS中Media Query @media功能來判斷沃恩的終端設備寬度是多少像素，然后執(zhí)行對應的CSS樣式。
所有網(wǎng)頁響應式布局代碼都是這一句： <meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,user-scalabe=0">
解析： <!--
width:賦值為固定像素或者某個特殊的值,比如device-width.
指的是100%時的像素
height:和width一樣
initial-scale=1.0,第一次加載網(wǎng)頁時顯示的比例.
maximum-scale=1.0:允許用戶手動縮放的最大比例
user-scalable=0.值為0代表不允許用戶手動縮放.
這段代碼的意思是:
讓viewport的分辨率等于物理設備上的真實分辨率,
不允許用戶修改,可以保證顯示效果真實細膩.
-->
media query能夠獲取哪些值?
- 設備的寬和高device-width，device-heigth顯示屏幕/觸覺設備。
- 渲染窗口的寬和高width，heigth顯示屏幕/觸覺設備。
- 設備的手持方向，橫向還是豎向orientation(portrait|lanscape)和打印機等。
- 畫面比例aspect-ratio點陣打印機等。
- 設備比例device-aspect-ratio-點陣打印機等。
- 對象顏色或顏色列表color，color-index顯示屏幕。
- 設備的分辨率resolution。
在線咨詢