免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

淺談移動端rem的用法

一 什么是rem?

網站建設哪家好,找創新互聯建站!專注于網頁設計、網站建設、微信開發、成都小程序開發、集團企業網站建設等服務項目。為回饋新老客戶創新互聯還提供了昌樂免費建站歡迎大家使用!

“font size of the root element 這是w3c的定義

也就是說是相對于根節點(html節點)的字體大小的單位。

目前主流的瀏覽器基本都支持rem這個單位,大部份的默認字體單位是16px。

淺談移動端rem的用法

圖片摘自 http://caniuse.mojijs.com/Home/Html/item/key/rem/index.html

 二 簡單應用。

既然確定在各個主流瀏覽器都能食用的話,我們就放心大膽在移動端進行開發了。

舉個例子說明

淺談移動端rem的用法

-size:62.5%; --size:1

淺談移動端rem的用法

由于我們選定的瀏覽器默認字體為16px,將根節點html設置為 font-size:62.5%;,這樣換算下來的話 1rem = 10px ,在單位的計算方便將會方便很多。

三 響應式使用。

在實際開發過程中,不論是移動端還是pc端都要兼容各種分辨率的設備,所以實際尺寸是要響應式的。

假如說上個例子的62.5%是基于iPhone5的尺寸,也就是說是320*568的尺寸

如果是ipad尺寸的時候,只要相應的擴大倍數即可

@media only screen and (min-width: 768px){
    html {
        font-size: 150%!important;
    }
}

注:利用媒體查詢,可根據自己的實際需要,設定不同的尺寸。

四 rem的進階使用

先甩上地址 ht   tps://g   ithub.  com/am fe/lib-flexible

說起移動端適配,怎么能少 了淘寶的移動端~

這個教程足夠詳細了(如果絕對還不夠的話,可以參考下這個地址  h   ttp   s://gi   thu   b.com/am   fe/article/issues/17 ,其中還有現成的demo)。

在引入flexible.js過后,關于px轉成rem的方法:

在sublime中是有直接轉換的插件,有興趣的童鞋可以去研究下。

在sass/less預編譯下也可快速計算當前尺寸。

標題名稱:淺談移動端rem的用法
分享URL:http://m.newbst.com/article40/gsepeo.html

成都網站建設公司_創新互聯,為您提供服務器托管、微信小程序云服務器、網站營銷、標簽優化手機網站建設

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

外貿網站制作