前端知識點整理系列(一) 響應式布局

2021-08-01 03:45:49 字數 1059 閱讀 8741

今天整理關於響應式布局的知識。響應式布局這個名詞現在應該已經很熟悉了,隨著移動端的普及,我們的**的使用者體驗需要提公升,響應式布局可以解決我們的問題。

簡單點說,就是同乙個頁面可以適應不同的螢幕大小裝置的設計方案,做乙個**同時能相容多個終端,通過css中media query(媒介查詢)@media功能,來判斷我們的終端裝置寬度在多少畫素內,然後就執行與之對應的css樣式。

當建立乙個響應式**,或者非響應式**變成響應式的時候,首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局,頁面固定寬度大小。如果完成了非響應式那麼我在去新增**查詢(media query)和響應式**。這種操作更容易實現響應式特性。在手機裝置上,我們要禁止使用者來縮放螢幕。不禁止的話,可能在顯示上會造成錯位,以及顯示的不是手機**的樣式。所以,我們要通過**來禁止使用者在手機端上縮放螢幕,已達到正常的手機**效果。

name="viewport"

content="width=device-width, initial-scale=1.0">

media query 是響應式設計的核心,它能夠和瀏覽器進行溝通,告訴瀏覽器頁面如何呈現,假如乙個終端的解析度小於980px,那麼可以這樣寫,這個時候的布局會覆蓋掉之前設定的布局。

@media screen and (max-width:980px)

#content

#footer

}

假如我們要相容ipad和iphone檢視,我們可以這樣設定:

/**ipad**/

@media only screen and (min-width:768px)and(max-width:1024px)

/**iphone**/

@media only screen and (width:320px)and (width:768px)

#wrap

img

如此設定後id為wrap內的會根據wrap的寬度改變已達到等寬擴充,height為auto的設定是為了保證原始的高寬比例,以至於不會失真。

Flex布局知識點整理

一 傳統布局與flex布局 1.傳統布局 相容性好 布局繁瑣 侷限性,不能再移動端很好的布局 2.flex彈性布局 操作方便,布局極為簡單,移動端應用廣泛 pc端瀏覽器支援情況較差 ie 11或更低版本,不支援或僅部分支援 建議 如果是pc端頁面布局,我們還是用傳統布局。如果是移動端或者不考慮相容性...

前端知識點整理目錄

瀏覽器渲染機制 三次握手四次揮手 http狀態碼 http隊頭阻塞 基本文件規範 h5新標籤 彈性布局 flex 盒模型 box sizing 形變 translate 水平垂直居中 定位布局 原型與原型鏈 工廠模式 建構函式模式 原型模式 事件迴圈機制eventloop 節流防抖 js深淺拷貝 閉...

前端知識點整理(二)

1.html怎麼解析的?把html解析為dom樹,使用css渲染dom,js操作dom。2.window中的onload和jq中的ready有什麼區別?a window中的onload是在頁面中的包括的所有元素載入玩之後才會執行,jq中的 document ready 是dom載入完之後就可以執行,...