梳理一下自己寫響應式頁面的流程。
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 大螢幕...