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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Web移動端頁面 –響應式和動態REMWebREM
- token響應式設定
- 前端響應式佈局基礎——rem前端REM
- web響應式佈局之 meta詳解Web
- Responsive Web Design 響應式網頁設計Web網頁
- Hype如何設定字型樣式
- [譯] 響應式 Web 應用(四)Web
- [譯] 響應式 Web 應用(五)Web
- 徹底弄懂設定根元素字型大小calc(100vw/18.75) 實現rem自適應REM
- 使用 setResponseStatus 函式設定響應狀態碼函式
- SpringBoot中的響應式web應用Spring BootWeb
- 響應式程式設計簡介之:Reactor程式設計React
- Android開發之動態設定字型的樣式和粗細Android
- 玻纖效應之我見
- 直播系統app原始碼,設定樣式(字型樣式、行列寬高、對齊方式、邊框)APP原始碼
- 前端成神之路-移動web開發之響應式佈局前端Web
- TextMeshPro - 字型設定
- sqldeveloper 字型設定SQLDeveloper
- css字型設定CSS
- 基於媒體查詢和 rem 的響應式佈局實踐REM
- Web應用課 2.4 CSS——flex、響應式佈局WebCSSFlex
- Android更換APP字型—TextView各種字型樣式AndroidAPPTextView
- 開發響應式web頁面的經驗Web
- matplotlib預設字型設定
- 前端RxJs響應式程式設計之運算子實踐前端JS程式設計
- Vue專案rem佈局設定VueREM
- 這次我好像才真的明白了CSS Rem字型計算的原理CSSREM
- Web Server 設定快取響應欄位的一些推薦方案WebServer快取
- 【ASP.NET Core】設定Web API 響應的資料格式——Produces 特性篇ASP.NETWebAPI
- 【ASP.NET Core】設定 Web API 響應資料的格式——FormatFilter特性篇ASP.NETWebAPIORMFilter
- [譯]使用MVI打造響應式APP(八):導航APP
- CSS內聯樣式的使用,設定字型屬性CSS
- 函式響應式程式設計與RxSwift函式程式設計Swift
- 使用Reactor響應式程式設計React程式設計
- idea之設定web工程的TomcatIdeaWebTomcat
- 讓 Weex UI 響應系統設定UI
- Vue響應式—-資料響應式原理Vue
- 響應式設計?響應式設計的基本原理是什麼?如何做?