web app響應式字型設定!rem之我見
之前做沙漠教育的時候,直接以設計圖為準,然後強暴式,縮放處理。簡單。直接,粗暴!但是,開發快。……一勞永逸!
但那是,現在開發,作為業界良心:是不能那麼做的!(那個是被逼的啊
首先看程式碼:
@media screen and (max-width:362px)and(min-width: 330px){
html{font-size: 60%;}
//.top-banner{
// font-size: 15px
//}
//.btn-download{
// margin-left: 5%;
//}
}
@media screen and (max-width:330px){
html{font-size: 53.333331%;}
//.top-banner{
// font-size: 14px
//}
//.btn-download{
// margin-left: 4%;
//}
}
因為我的設計圖是750,iphone6設計的!
至於是怎麼得出來的數字呢?
我們走到。瀏覽器預設字型是16畫素。1/16=62.5
360/375*62.5%=60%
就黑之前,做響應式圖片、padding-top,是一個道理哈!!
這樣,媽媽,就再也不用去寫,每個class的字型拉!
當然,這個是要團隊合作的
遇到豬一樣的互動,貓一樣的設計……
你只有死的份!
所有,堅決認為!!
寧為牛後,不為雞頭!
這個文章寫在很久以前,還是搬出來與大家共享,轉載請註明出處
:
作者:zhoulujun
連結:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2370/viewspace-2814284/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Rem 字型設定學習REM
- rem響應式佈局REM
- Web移動端頁面 –響應式和動態REMWebREM
- 響應式Web設計Web
- token響應式設定
- 響應式 Web 設計技巧Web
- 前端響應式佈局基礎——rem前端REM
- rem在響應式佈局中的應用REM
- 學習之響應式Web設計---一個例項Web
- web響應式佈局之 meta詳解Web
- 自適應網頁設計/響應式Web設計網頁Web
- 十大響應式Web設計框架Web框架
- 響應式Web設計實戰總結Web
- Hype如何設定字型樣式
- css 字型樣式設定大全CSS
- [譯] 響應式 Web 應用(四)Web
- [譯] 響應式 Web 應用(五)Web
- [譯] 響應式 Web 應用(三)Web
- [譯] 響應式 Web 應用(二)Web
- [譯] 響應式 Web 應用(一)Web
- Responsive Web Design 響應式網頁設計Web網頁
- 談響應式web設計程式碼實現Web
- js實現移動端字型響應式JS
- (高階)用CSS3新增的rem單位設定字型大小CSSS3REM
- 使用 setResponseStatus 函式設定響應狀態碼函式
- 響應式程式設計簡介之:Reactor程式設計React
- 響應式程式設計與響應式系統程式設計
- 徹底弄懂設定根元素字型大小calc(100vw/18.75) 實現rem自適應REM
- 推薦15款響應式Web設計測試工具Web
- 18個最好的響應式Web設計工具和庫Web
- 有關響應式Web設計的7點啟發Web
- REM:web app適配的祕密武器REMWebAPP
- 5個常見響應式設計陷阱及解決方案
- 你應該避開的 3 個響應式 Web 設計的陷阱Web
- 【Spring 5】響應式Web框架前瞻SpringWeb框架
- SpringBoot中的響應式web應用Spring BootWeb
- 響應式網頁設計之技能技巧大盤點網頁
- 基於媒體查詢和 rem 的響應式佈局實踐REM