IT技術互動交流平台

金木棋牌官网

作(zuo)者︰whl  發布日期︰2020-02-24 12:55:00

  隨著(zhou)如今手zhi)分衷yue)增越(yue)多(duo),就不說隻huai)盜杏卸duo)少(shao)款了,光是(shi)安卓(zhuo)就有小米、華為、魅族(zu)等數(shu)不勝數(shu),因此程序員(yuan)不可能為每一款手zhi)夾匆惶tao)適合它的布局(ju)樣式,那麼我們(men)該怎麼做呢?這個時候,我們(men)就需要用到(dao)rem了,rem就是(shi)專(zhuan)門(men)為了適shi)Σ季ju)而生的,大家感興趣(qu)的mu)hua)可以(yi)繼續往下看。

  適配要達到(dao)的效果,如下圖(簡單的示範一下)

  兩(liang)個div不論(lun)在(zai)大屏還(huai)是(shi)小屏上都是(shi)佔據屏幕(mu)的一hua)/p>

適配要達到(dao)的效果

  雖然上面這種簡單的使用百分比(bi)可以(yi)實現但是(shi),百分比(bi)無法實現字體的自(zi)適shi)Γ 俜直bi)轉換成(cheng)相應的尺寸還(huai)是(shi)很難的。接下來(lai)就說說這次我們(men)的主角(jiao) rem (我們(men)一hua)闃zhi)適配寬度)

  rem 原理解析

  首(shou)先rem是(shi)一個相對于根元(yuan)素(su)fontSize大小的相對單位,也就是(shi)說 1rem 等于 html 的 fontSize 大小, 接下來(lai)我們(men)只(zhi)需要改變(bian)html 元(yuan)素(su)的 fontSize 就可以(yi)控制 rem 的大小。接下來(lai)我們(men)怎麼適配不同的屏幕(mu)呢,只(zhi)要我們(men)做到(dao) 屏幕(mu)寬度越(yue)大 1rem 表示的px值越(yue)大及HTML的fontSize值越(yue)大,也就是(shi)說 HTML的fontSize要于屏幕(mu)的mu)磯瘸cheng)正比(bi)。

  再說一下一些概(gai)念 設備像素(su)比(bi) 、 設備物理像素(su) 、 設備獨(du)立像素(su) (有時也說是(shi)虛(xu)擬像素(su))

  設備像素(su)比(bi) = 設備物理像素(su) / 設備獨(du)立像素(su)

  設備物理像素(su)︰ 設備上顯示的最小單位

  設備獨(du)立像素(su)︰ 獨(du)立于設備的用于邏輯(ji)上衡量像素(su)的單位(css尺寸)。

  就拿(na)iphone6/7/8 做說明iphone6/7/8的物理像素(su)是(shi)750,是(shi)設備的實dao)食嘰紓 x是(shi)是(shi)設備獨(du)立像素(su)單位,iphone6/7/8是(shi)2倍屏,它的css尺寸就是(shi) 375, 設備像素(su)比(bi)是(shi)設備出廠時已經設置好的。 那麼我們(men)怎麼實現適配?

  這就用到(dao)最流行的rem了

  rem的實現方案

  首(shou)先、根據不同屏幕(mu)的設備物理像素(su),要跟html元(yuan)素(su)的fontSize設置不同的px大小

  1、媒體查詢

  利用@media screen and (min-width:XXX)來(lai)判斷設備的尺寸,進而設置html的fontSize

媒體查詢

  2、js設置html的fontSize(網易方案)

  以(yi)上代(dai)碼(ma)是(shi)以(yi)iphone6為設計稿(gao),結果是(shi)1rem=100px的實dao)氏袼su),因為iphone6的設備像素(su)比(bi)是(shi)2所以(yi)1rem在(zai)瀏覽(lan)器(qi)的預覽(lan)中是(shi)50px,也就是(shi)實現了1rem和(he)設備寬度成(cheng)7.5倍的關(guan)系,設備寬度改變(bian)1rem的實dao)蝕笮∫不岣謀bian),而且yi)zai)屏幕(mu)中的比(bi)例是(shi)沒有變(bian)的。(市面上大多(duo)數(shu)是(shi)這種方案)

js設置html的fontSize

  3、使用vw、vh

  vw、vh是(shi)新的一種相對單位是(shi)把可視(shi)區域分的mu)碭呶00份(fen)類(lei)似于百分比(bi)布局(ju),這種方案它不用去寫js,不huai)嬡菪雜械悴/p>

使用vw、vh

  下面附上vw、vh兼容性的表

vw、vh兼容性的表

  每篇一省 rem是(shi)相對于根元(yuan)素(su)的fontSize,所以(yi)yun)信  褪shi)設置根元(yuan)素(su)的fontSize與(yu)設備寬度成(cheng)正比(bi)。

  大家現如今對于前端的要求是(shi)越(yue)來(lai)越(yue)高了,為此一個合適的處理方法就十分有必要了。rem的使用方法其實是(shi)很簡單的,大家不需要害(hai)怕自(zi)己不會操(cao)作(zuo)導(dao)致手zhi)鑫侍庵 lei)的發生。以(yi)上就是(shi)今天要分享(xiang)給大家的全部內容了,大家可以(yi)多(duo)學習學習,為以(yi)後需要做準備。

金木棋牌官网

    Tag標(biao)簽︰rem適配達到(dao)效果  
    • 金木棋牌官网

    About IT165 - 廣告(gao)服務 - 隱私聲明 - 版(ban)權申明 - 免責條(tiao)款 - 網站地(di)圖 - 易发平台官网網友投稿(gao) - 聯(lian)系方式
    本(ben)站內容來(lai)自(zi)于互聯(lian)網,僅供用于網絡技術學習,學習中請遵(zun)循(xun)相關(guan)法律(lv)法規
    金木棋牌官网 | 下一页