正规的彩票

如何利用vw+rem进行移动端布局

  发布时间: 2019-06-23 15:36:17   作者: WangJiaYuan   正规的彩票要评论
这篇文章主要介绍了如何利用vw+rem进行移动端布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

nihaizaiyongremdanxingbujuma?zaihtmlwenjiantoubufangruyidaduanyasuoguodejsdaima,shibushirangnihennanshou?lailejiexiavwba,nengrangnidedaimagengchuncui

简单介绍下rem布局方案

remshicsszhongdezhangdudanwei,1rem=genyuansuhtmldefont-sizezhi。dangyemianzhongsuoyouyuansudoushiyongremdanweishi,nizhixuyaogaibiangenyuansufont-sizezhi,suoyouyuansujiuhuianbilifangdahuozhesuoxiao。yincizhengguidecaipiaozhixuyaoxieyixiaoduanjsdaima,genjupingmukuandugaibianhtmldefont-sizezhi,jiukeyizuodaodanxingbuju。zheizhongfangfaqueshibianjie,jianrongxingyehenhao,shimuqianfeichangzhuliudedanxingbujufangan。danzheizhongfanganyoubiduan(biduanzhiyi: hegenyuansufont-sizezhiqiangouhe,xitongzitifangdahuosuoxiaoshi,huidaozhibujucuoluan;biduanzhier: htmlwenjiantoubuxucharuyiduanjsdaima ),benwenjiangjieshaoyizhonggengyouxiuchuncuidefangan。

vw单位实现弹性布局

zhengguidecaipiaoxianlaikankanzheivw vhdanwei w3cdeguanfangjieshi vw: 1% of viewport’s width vh: 1% of viewport’s height

正规的彩票viewportjiliulanqikeshiquyudaxiao zhengguidecaipiaokeyizheiyanglijie 100vw = window.innerwidth, 100vh = window.innerheight zaiyidongduanzhengguidecaipiaoyibandoukeyirenwei,100vwjiushipingmukuandu。ruoshiyongvwbuju,jiubuxuyaozaixiangremneiyang,zaijszhongqudongtaishezhigenyuansudefont-sizele,sasszhongzhixuyaoshiyongzheigehanshuzuozhuanhuanjike

//以iphone7尺寸@2x 750像素宽的视觉稿为例
@function vw($px) {
    @return ($px / 750) * 100vw;
}

//假设一个div元素在视觉稿中,宽度为120px,字体大小为12px
div {
    width: vw(120);
    font-size: vw(12);
}

vw单位和百分比%单位对比

那么100vw和正规的彩票平时用的width:100%有什么区别呢?

1.baifenbi%shigenjufuyuansukuanduhuozhegaodujinxingjisuan,ervw vhgudinganzhaoviewportlaijisuan,buhuishoufuyuansukuangaoduyingxiang。

2.100vwbaokuoleyemiangundongtiaokuandu(yemiangundongtiaoshuyuviewportfanweinei,100vwdangranbaokuoleyemiangundongtiaokuandu)。danbabodyhuozhehtmlshezhiweiwidth:100%shi,shibubaokuoyemiangundongtiaodekuandude。yejiushishuo100vwzaiyouzongxianggundongtiaodeqingkuangxia,huibi100%kuan。 neimejiuhuiyinfayigewenti: pcduanshiyongvwdanweishi,ruguoyemianneirongchaochuyipingzhangdu,chuxianlezongxianggundongtiao,tongshiyouyuansuwidth:100vw, zehuidaozhichuxiantiaohengxianggundongtiao,yinweiyuansu(100vw + gundongtiaokuandu)chaochuleviewportkuandu。(yidongduangundongtiaobuzhanwei,suoyibuhuiyouzheigewenti)buguopcduanyibanbuxuyaodanxingbuju,haishijinliangshiyongwidth:100%gengbaoxian。

  • 根据CSS3规范,视口单位主要包括以下4个:
  • vw : 1vw 等于视口宽度的1%
  • vh : 1vh 等于视口高度的1%
  • vmin : 选取 vw 和 vh 中最小的那个
  • vmax : 选取 vw 和 vh 中最大的那个

yongshikoudanweiduliang,shikoukuanduwei100vw,gaoduwei100vh(zuoceweishupingqingkuang,youceweihengpingqingkuang)

正规的彩票liru,zaizhuomianduanliulanqishikouchicunwei650px,neime 1vw = 650 * 1% = 6.5px(zheishililuntuisuandechu,ruguoliulanqibuzhichi0.5px,neimeshijixuanranjieguokenengshi7px)。

兼容性

利用适口单位适配页面

duiyuyidongduankaifalaishuo,zuiweizhongyaodeyidianshiruheshipeiyemian,shixianduozhongduandejianrong,butongdeshipeifangshigeyouqianqiu,yegeyouquedian。

jiuzhuliudexiangyingshibuju、danxingbujulaishuo,tongguomedia queries shixiandebujuxuyaopeizhiduogexiangyingduandian,erqiedailaidetiyanyeduiyonghushifendebuyouhao:bujuzaixiangyingduandianfanweineidefenbianlvweichibubiao,erzaixiangyingduandianqiehuandeshunjian,bujudailaiduancengshideqiehuanbianhuan,rutongkadaidechangjiban"kakaka"diyiyouyixia。

正规的彩票ertongguocaiyongremdanweidedongtaijisuandedanxingbuju,zeshixuyaozaitoubuneiqianyiduanjiaobenlaijinxingjiantingfenbianlvdebianhualaidongtaigaibiangenyuansuzitidaxiao,shidecssyujsouhelezaiyiqi。

正规的彩票youmeiyoubanfanenggoujiejuezheiyangdewentini?

daanshikending,tongguoliyongshikoudanweishixianshipeideyemian,shijinengjiejuexiangyingshiduancengwenti,younengjiejuejiaobenyilaidewentide。

用法以iPhone6为基准(750)

diyibuyibanlaishuo,zhengguidecaipiaodouhuiduiyidongduanjinxingmetabiaoqianshezhi

<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no">

yinweiiphone6yijidaduoshudedprwei2,weiledierbudefangbianjinxinghuansuan

dierbushezhibody、htmldefont-size

html {
    font-size: 13.3333333333333vw // 100px
}

13.3333333333333vw怎么来?

  • 适口为100vw,以iPhone6 750px基准
  • 适口/iPhone6
    • 100vw / 750 = 0.3333vw
  • 如果正规的彩票以100px作为适口那么
  • 100px / 750 = 0.3333px
  • 就是1px = 0.3333vw
  • 那么整个适口等于 0.3333 * 10013.3333333333333vw = 100px
  • 最终于得出 100px = 1rem

tongguozheiyangzihuansuanzhengguidecaipiaoliyongvwbaremzhuanhuanchengleyi100pxweijizhun

正规的彩票neimezaixiangmushangjiuhenhaodikeyijinxingshiyongle

div {
 
     // width: 100px;
     width: 1rem; 
}
 
span {
   // height: 12px
    height: .12rem
}

daocizheipianguanyuruheliyongvw+remjinxingyidongduanbujudewenzhangjiujieshaodaozheile,gengduoxiangguanvw+remyidongduanbujuneirongqingsousuojiaobenzhijiayiqiandewenzhanghuojixuliulanxiamiandezhengguidecaipiaoxiangguandewenzhang,xiwangdajiayihouduoduozhichijiaobenzhijia! 

正规的彩票相关的文章

  • 浅析CSS中单位px、rem、em、vh、vw之间的区别

    这篇文章主要介绍了CSS中单位px、rem、em、vh、vw之间的区别,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-25
  • CSS 中px、em、rem、%、vw、vh单位之间的区别详解

    这篇文章主要介绍了CSS 中px、em、rem、%、vw、vh单位之间的区别,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-03-16
  • CSS3移动端vw+rem不依赖JS实现响应式布局的方法

    这篇文章主要介绍了CSS3移动端vw+rem不依赖JS实现响应式布局的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-23
  • css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    这篇文章主要介绍了css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况的相关资料,需要的朋友可以参考下
    2015-12-06
  • 浅析rem和em和px vh vw和% 移动端长度单位

    下面小编就为大家带来一篇浅析rem和em和px vh vw和% 移动端长度单位。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2015-04-28

最新评论

正规的彩票_正规彩票平台app下载[首页最快线路√] 彩票官网_彩票官网app|网站首页 彩票平台_彩票平台快三-[平台最快线路√] 彩票app下载_彩票app下载官网下载快三_官方入口 彩票平台_彩票平台app-专注彩票门户 彩票官网_彩票官网app下载网址-HOME 彩票平台_彩票平台登录-老品牌最信誉 彩票app_彩票app客户端下载>> 首页 彩票平台_彩票平台免费送彩金18-点击进入>! 彩票平台_彩票平台官网〖2020购彩首选〗 彩票app_彩票app彩票投注平台-Welcome