標籤:學習 fonts 文法 不同 移動 har dia 圖片 viewport
常見移動web適配方案一般有3種方法,如:
①:定高,寬度百分比(百分比適配簡單,一般用來做一些適配性不高的頁面,比如只有一些文字和圖片等簡單的螢幕適配)
②:flex (更多的用於複雜頁面的布局。具體參照阮一峰大神寫的-Flex 布局教程:文法篇和執行個體篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool (文法篇)
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html (執行個體篇)
③:媒體查詢(css3 media媒體查詢器用法總結:http://www.bubuko.com/infodetail-268180.html)
註:flex和媒體查詢這2種方案可以實現移動端的日常響應式開發。但不推薦媒體查詢,因為針對不同螢幕的不同頁面都要去單獨寫樣式,很麻煩,而且低效。
Rem:
以下是我在學習rem的過程當中看過的幾篇寫得比較好的文章,內容容易理解,也比較全面,適合入門。看完以後,對rem就瞭解得差不多了,所以我就不再贅述了。
http://www.w3cplus.com/css3/define-font-size-with-css3-rem CSS3的REM設定字型大小
https://www.jianshu.com/p/b00cd3506782 手機端頁面自適應解決方案—rem布局基礎篇
https://www.jianshu.com/p/985d26b40199 手機端頁面自適應解決方案—rem布局進階版(附源碼樣本)
最近跟著某視頻學rem,然後寫了個簡單的demo。用JS動態修改根項目的字型大小,跟上面連結裡引用的JS不同,個人感覺更簡單,容易理解
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>動態修改font-size方法-rem</title> <style type="text/css"> * { margin: 0; padding: 0; } html { font-size: 16px; } .box { width: 10rem; height: 10rem; background-color: black; } .text { color: #fff; } </style> </head> <body> <div class="box"> <p class="text">hello rem</p> </div> <script type="text/javascript"> // 擷取視窗可視寬度 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; console.log(htmlWidth); // 擷取視窗可視高度 let htmlDom = document.getElementsByTagName(‘html‘)[0]; console.log(htmlDom); // 這裡除以10方便計算,不要除以太離譜的數值,比如200,瀏覽器無法識別這麼小的值 // 這裡htmlDom計算出的值,相當於給html設定font-size htmlDom.style.fontSize = htmlWidth / 10 + ‘px‘; </script> </body></html>
移動端適配方案-rem(基礎篇)