荣耀彩票代理

IT技术互动交流平台

如何才能让rem适配达到想要的效果呢

作者:whl  发布日期:2018-11-13 08:36:00

荣耀彩票代理  SUIZHERUJINSHOUJIPINZHONGYUEZENGYUEDUO,JIUBUSHUOPINGGUOXILIEYOUDUOSHAOKUANLE,GUANGSHIANZHUOJIUYOUXIAOMI、HUAWEI、MEIZUDENGSHUBUSHENGSHU,YINCICHENGXUYUANBUKENENGWEIMEIYIKUANSHOUJIDOUXIEYITAOSHIHETADEBUJUYANGSHI,NEIMEWOMENGAIZENMEZUONI?ZHEIGESHIHOU,WOMENJIUXUYAOYONGDAOremLE,remJIUSHIZHUANMENWEILESHIYINGBUJUERSHENGDE,DAJIAGANXINGQUDEHUAKEYIJIXUWANGXIAKAN。

  SHIPEIYAODADAODEXIAOGUO,RUXIATU(JIANDANDESHIFANYIXIA)

荣耀彩票代理  LIANGGEdivBULUNZAIDAPINGHAISHIXIAOPINGSHANGDOUSHIZHANJUPINGMUDEYIBAN

适配要达到的效果

  SUIRANSHANGMIANZHEIZHONGJIANDANDESHIYONGBAIFENBIKEYISHIXIANDANSHI,BAIFENBIWUFASHIXIANZITIDEZISHIYING,BAIFENBIZHUANHUANCHENGXIANGYINGDECHICUNHAISHIHENNANDE。JIEXIALAIJIUSHUOSHUOZHEICIWOMENDEZHUJIAO rem (WOMENYIBANZHISHIPEIKUANDU)

  rem YUANLIJIEXI

荣耀彩票代理  SHOUXIANremSHIYIGEXIANGDUIYUGENYUANSUfontSizeDAXIAODEXIANGDUIDANWEI,YEJIUSHISHUO 1rem DENGYU html DE fontSize DAXIAO, JIEXIALAIWOMENZHIXUYAOGAIBIANhtml YUANSUDE fontSize JIUKEYIKONGZHI rem DEDAXIAO。JIEXIALAIWOMENZENMESHIPEIBUTONGDEPINGMUNI,ZHIYAOWOMENZUODAO PINGMUKUANDUYUEDA 1rem BIAOSHIDEpxZHIYUEDAJIHTMLDEfontSizeZHIYUEDA,YEJIUSHISHUO HTMLDEfontSizeYAOYUPINGMUDEKUANDUCHENGZHENGBI。

  ZAISHUOYIXIAYIXIEGAINIAN SHEBEIXIANGSUBI 、 SHEBEIWULIXIANGSU 、 SHEBEIDULIXIANGSU (YOUSHIYESHUOSHIXUNIXIANGSU)

  SHEBEIXIANGSUBI = SHEBEIWULIXIANGSU / SHEBEIDULIXIANGSU

  SHEBEIWULIXIANGSU: SHEBEISHANGXIANSHIDEZUIXIAODANWEI

荣耀彩票代理  SHEBEIDULIXIANGSU: DULIYUSHEBEIDEYONGYULUOJISHANGHENGLIANGXIANGSUDEDANWEI(cssCHICUN)。

荣耀彩票代理  JIUNAiphone6/7/8 ZUOSHUOMINGiphone6/7/8DEWULIXIANGSUSHI750,SHISHEBEIDESHIJICHICUN,ERpxSHISHISHEBEIDULIXIANGSUDANWEI,iphone6/7/8SHI2BEIPING,TADEcssCHICUNJIUSHI 375, SHEBEIXIANGSUBISHISHEBEICHUCHANGSHIYIJINGSHEZHIHAODE。 NEIMEWOMENZENMESHIXIANSHIPEI?

  ZHEIJIUYONGDAOZUILIUXINGDEremLE

  remDESHIXIANFANGAN

荣耀彩票代理  SHOUXIAN、GENJUBUTONGPINGMUDESHEBEIWULIXIANGSU,YAOGENhtmlYUANSUDEfontSizeSHEZHIBUTONGDEpxDAXIAO

  1、MEITICHAXUN

荣耀彩票代理  LIYONG@media screen and (min-width:XXX)LAIPANDUANSHEBEIDECHICUN,JINERSHEZHIhtmlDEfontSize

媒体查询

荣耀彩票代理  2、jsSHEZHIhtmlDEfontSize(WANGYIFANGAN)

  以上代码是以iphone6为设计稿,结果是1rem=100px的实际像素,因为iphone6的设备像素比是2所以1rem在浏览器的预览中是50px,也就是实现了1rem和设备宽度成7.5倍的关系,设备宽度改变1rem的实际大小也会改变,而且在屏幕中的比例是没有变的。(市面上大多数是这种方案)

js设置html的fontSize

  3、SHIYONGvw、vh

荣耀彩票代理  vw、vhSHIXINDEYIZHONGXIANGDUIDANWEISHIBAKESHIQUYUFENDEKUANGAOWEI100FENLEISIYUBAIFENBIBUJU,ZHEIZHONGFANGANTABUYONGQUXIEjs,BUGUOJIANRONGXINGYOUDIANCHA

使用vw、vh

荣耀彩票代理  XIAMIANFUSHANGvw、vhJIANRONGXINGDEBIAO

vw、vh兼容性的表

  MEIPIANYISHENG remSHIXIANGDUIYUGENYUANSUDEfontSize,SUOYISUOYOUNULIJIUSHISHEZHIGENYUANSUDEfontSizeYUSHEBEIKUANDUCHENGZHENGBI。

  DAJIAXIANRUJINDUIYUQIANDUANDEYAOQIUSHIYUELAIYUEGAOLE,WEICIYIGEHESHIDECHULIFANGFAJIUSHIFENYOUBIYAOLE。remDESHIYONGFANGFAQISHISHIHENJIANDANDE,DAJIABUXUYAOHAIPAZIJIBUHUICAOZUODAOZHISHOUJICHUWENTIZHILEIDEFASHENG。YISHANGJIUSHIJINTIANYAOFENXIANGJIDAJIADEQUANBUNEIRONGLE,DAJIAKEYIDUOXUEXIXUEXI,WEIYIHOUXUYAOZUOZHUNBEI。

延伸阅读:

Tag标签:   
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规