響應式頁面製作總結

2021-07-25 09:06:07 字數 964 閱讀 5978

梳理一下自己寫響應式頁面的流程。

1、頭部加上meta 標籤。

width=device-width  頁面寬度為裝置寬度

initial-scale=1.0       初始縮放為1.0

minimum-scale=1.0, maximum-scale=1.0, 最大最小縮放為1.0

user-scalable=no  不予許使用者縮放

2、**查詢畫素用em表示

@media srceen and (max-width:120em) /*這時候的字型大小都是按照10px計算的,1em==1rem=10em,但是最小字型不能小於12px,所以至少1.2em或者1.2rem。頁面內容長寬的計算1rem=1em=12px,這一點要切記.上面用**查詢em計算是1920/16來計算的 **查詢是按照1em=16px*/

}@media srceen and (max-width:105.5em)

@media srceen and (max-width:90em)

@media srceen and (max-width:85.38

em)

@media srceen and (max-width:64em)

@media srceen and (max-width:48em)

@media srceen and (max-width:26em)

@media srceen and (max-width:24em)

@media srceen and (max-width:20em)

根節點html的font-size是62.5%,這時候長寬等於1em=1rem=12px;行高line-height1em=1rem=12px;字型大小為1rem=1em=10px,但是瀏覽器最小支援10px,所以字型不能小於1.2em或者1.2rem.

從1920寬度響應到小的寬度,其中字型和行高要變化,直接設定根節點html的font-size為75%

響應式頁面設計

響應式頁面 1 viewport檢視 首先在頭部插入 其中,width 控制viewpoint的寬度,可以是固定值,也可以是device width,即裝置的寬度。2 呼叫不同的css檔案 在不同頁面大小下頁面由不同的css控制,這時候需要用 這表示頁面寬度如果在614 810px,就呼叫外部的in...

關於響應式頁面

作為乙個無線部門的人,不懂移動裝置是不行的。而作為乙個無線的重構 不會寫響應式 頁面更是不行得。而我,乙個無線的重構 在我最近做的乙個移動端的專案之前,的確是不會寫響應式 頁面的,所以,嚴格來說,在這個專案之前,我是乙個不合格的無線重構 人。而這個專案,卻讓我快速地掌握了響應式頁面重構的一些方法。下...

響應式總結

一 響應式頁面 1 響應式 的兩種形式 2 響應式 的兩種技術 二 螢幕大小分類 1 超小螢幕 手機,小於768px 2 小螢幕 平板,大於等於768px media max width 992px 3 中等螢幕 桌面顯示器,大於等於992px media min width 992px 4 大螢幕...