移動端適配方案-rem(基礎篇)

來源:互聯網
上載者:User

標籤:學習   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(基礎篇)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.