IT技術互動交流平台

如何才能讓rem適配達到想要的效果呢

作者-|索爱w550c刷机:whl  發布日期_|傲盾代理:2018-11-13 08:36:00

  隨著如今手機品種越增越多_-_本色屋,就不說蘋果係列有多少款了_|_11选5赚钱技巧,光是安卓就有小米-长明灯打一字、華為-||acg和谐区进不去、魅族等數不勝數|_-永安彩票是否合法,因此程序員不可能為每一款手機都寫一套適合它的布局樣式---苏果之家,那麼我們該怎麼做呢?這個時候_-青岛降级,我們就需要用到rem了|-钩子船长,rem就是專門為了適應布局而生的-_童小牛砸店是哪一集,大家感興趣的話可以繼續往下看-||11选5彩神通手机版。

  適配要達到的效果__-诺基亚官网pc套件下载,如下圖(簡單的示範一下)

  兩個div不論在大屏還是小屏上都是占據屏幕的一半

適配要達到的效果

  雖然上麵這種簡單的使用百分比可以實現但是_-|马三家子,百分比無法實現字體的自適應||空间留言代码爱情,百分比轉換成相應的尺寸還是很難的|-_小小的外阴纯图片看看。接下來就說說這次我們的主角 rem (我們一般隻適配寬度)

  rem 原理解析

  首先rem是一個相對於根元素fontSize大小的相對單位_青莲大桥,也就是說 1rem 等於 html 的 fontSize 大小|-哈乐士, 接下來我們隻需要改變html 元素的 fontSize 就可以控製 rem 的大小_谢霆锋张柏芝近况。接下來我們怎麼適配不同的屏幕呢---毛笔专卖,隻要我們做到 屏幕寬度越大 1rem 表示的px值越大及HTML的fontSize值越大_|_李天一受害老师照片,也就是說 HTML的fontSize要於屏幕的寬度成正比-_永胜国际彩票正规吗。

  再說一下一些概念 設備像素比 ___金箍棒手机铃声下载、 設備物理像素 --花境设计说明、 設備獨立像素 (有時也說是虛擬像素)

  設備像素比 = 設備物理像素 / 設備獨立像素

  設備物理像素_|3b今晚开奖号: 設備上顯示的最小單位

  設備獨立像素_开新换车连锁: 獨立於設備的用於邏輯上衡量像素的單位(css尺寸)_-15的时时彩。

  就拿iphone6/7/8 做說明iphone6/7/8的物理像素是750---娱乐天地客服,是設備的實際尺寸_|宣钢吧,而px是是設備獨立像素單位-_罗格电器,iphone6/7/8是2倍屏___我们结婚了20130503,它的css尺寸就是 375|梯形牌, 設備像素比是設備出廠時已經設置好的--成年人身份证。 那麼我們怎麼實現適配?

  這就用到最流行的rem了

  rem的實現方案

  首先永盛国际安全、根據不同屏幕的設備物理像素|_1号彩,要跟html元素的fontSize設置不同的px大小

  1-_阎玺、媒體查詢

  利用@media screen and (min-width:XXX)來判斷設備的尺寸|__众彩娱乐骗局,進而設置html的fontSize

媒體查詢

  2---美丽说女装2013新款、js設置html的fontSize(網易方案)

  以上代碼是以iphone6為設計稿|-|移动彩票靠谱吗,結果是1rem=100px的實際像素_|360彩票网站时时中,因為iphone6的設備像素比是2所以1rem在瀏覽器的預覽中是50px-_车四十四路事件原型,也就是實現了1rem和設備寬度成7.5倍的關係-觥,設備寬度改變1rem的實際大小也會改變|_星光大道娃娃李烁,而且在屏幕中的比例是沒有變的_|_易盈彩票靠谱吗?。(市麵上大多數是這種方案)

js設置html的fontSize

  3|--长城i7、使用vw__优彩网安全吗、vh

  vw_-ipad tv6电视棒密码、vh是新的一種相對單位是把可視區域分的寬高為100份類似於百分比布局-|365彩票改名了吗?,這種方案它不用去寫js_|-毕节退休医师医院,不過兼容性有點差

使用vw_--舅舅和外甥的关系、vh

  下麵附上vw|-_369彩票官网注册、vh兼容性的表

vw_|-集资建房政策、vh兼容性的表

  每篇一省 rem是相對於根元素的fontSize|-李驰博客,所以所有努力就是設置根元素的fontSize與設備寬度成正比|__邪恶少年eb的小站。

  大家現如今對於前端的要求是越來越高了__西班牙国家队2014最新名单,為此一個合適的處理方法就十分有必要了---038彩票苹果版打不开。rem的使用方法其實是很簡單的--优乐彩票可靠吗,大家不需要害怕自己不會操作導致手機出問題之類的發生-_高敏爱。以上就是今天要分享給大家的全部內容了_|_尹斗俊 孙娜恩,大家可以多學習學習__038彩票苹果官方版,為以後需要做準備|-朝鲜近况。

延伸閱讀|361彩票手机官方网站:

Tag標簽|_135彩票官网: rem適配達到效果  
  • 專題推薦

  • Directx11 遊戲編程入門教程
  • 專題主要學習DirectX的初級編程入門學習|_艾儿兰德 鲍德温,對Directx11的入門及初學者有...... 詳細
  • Windows7係統入門 優化 技巧技術專題
  • Windows7係統專題 無論是升級操作係統--南通开沙岛、資料備份_哈雷摩托车报价、加強資料的安全及管...... 詳細
About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯係方式
本站內容來自於互聯網,僅供用於網絡技術學習,學習中請遵循相關法律法規
快乐时时彩亿客隆彩票众赢彩票秒速赛车荣鼎彩票金牌彩票

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!