響應式總結

2021-10-10 20:58:32 字數 803 閱讀 4919

一、響應式頁面

1、響應式**的兩種形式

2、響應式**的兩種技術

二、螢幕大小分類

1、超小螢幕 (手機,小於768px)

2、小螢幕(平板,大於等於768px)

@media(max-width:992px)

3、中等螢幕(桌面顯示器,大於等於992px)

@media(min-width:992px)

4、大螢幕(大桌面顯示器,大於等於1200h)

@media(min-width:1300px)1300是考慮了側邊滾動條的寬度

其他寫法:

@media screen and

(min-width:

1200px)

@media screen and

(min-width:

800px)

and(max-width:

1200px)

@media screen and

(max- width:

800px)

三、具體實現思路

1、還是把pc端的介面先照舊做出來,多用彈性盒模型替代浮動

2、做響應式的時候把pc端的樣式先複製過來,不變的刪,要改的重新設定覆蓋即可

一開始除錯介面會有橫向滾動條有可能是正常的,一部分一部分調節即可 */

3、做大螢幕樣式時,只需要把小螢幕修改過的樣式改回來即可

響應式布局總結

言歸正傳,博主因為是刨根問底攔不組的,所以在此就往響應式設計的祖墳上刨,深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候,首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局,頁面固定寬度大小,我覺得這個對在座的各位沒有任何難度。如果完...

響應式學習總結

一 手機瀏覽器預設為我們做的兩件事情 1.頁面渲染在乙個980px ios 640 aniord 的viewport裡面 為了排版正確 2 預設縮放 二 三 不定寬高的水平垂直居中 方法1 box 方法2 flex版 box四 響應式設計 查詢 根據不同的螢幕寬度,設定不同的css樣式,顯示或隱藏等...

響應式布局總結

言歸正傳,博主因為是刨根問底攔不組的,所以在此就往響應式設計的祖墳上刨,深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候,首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局,頁面固定寬度大小,我覺得這個對在座的各位沒有任何難度。如果完...