一、響應式頁面
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標籤 當建立乙個響應式 或者非響應式 變成響應式的時候,首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局,頁面固定寬度大小,我覺得這個對在座的各位沒有任何難度。如果完...