全国服务热线:4008-888-888

技术知识

CSS应用calc()获☀得当今可视性显示屏高宽比的完

先掌握一下CSS3的相对性长短企业(参照详尽实例教程) :

相对性长短企业特定了一个长短相对性于另外一个长短的特性。针对不一样的机器设备相对性长短更可用。

em 它是叙述相对性于运用在当今原素的字体样式规格,因此它也是相对性长短企业。一般访问器字体样式尺寸默认设置为16px,则2em == 32px; ex 依靠于英语英文字母小 x 的高宽比 ch 数据 0 的总宽 rem 根原素(html)的 font-size vw viewpoint width,视窗总宽,1vw=视窗总宽的1% vh viewpoint height,视窗高宽比,1vh=视窗高宽比的1% vmin vw和vh中较小的哪个。 vmax vw和vh中很大的哪个。

从而由此可见,根据vh / vw 大家能够得到当今显示屏的视窗总宽,因此在css中,根据测算这一高宽比就可以促使div的高宽比全自动撑开到显示屏高宽比。而测算这一高宽比可使用css3的calc()涵数(参照详尽实例教程):

calc() 涵数用以动态性测算长短值。

  • 必须留意的是,计算符前后左右都必须保存一个空格符,比如:width: calc(100% - 10px);
  • 一切长短值都可以令其用calc()涵数开展测算;
  • calc()涵数适用 "+", "-", "*", "/" 计算;
  • calc()涵数应用规范的数学课计算优先选择级标准;

因此,只需设定div的高宽比heightcalc(100vh)就可以,100vh = 视窗高宽比的100%,事例:

div {
  width: 100%;
  height: calc(100vh);
}

必须留意的是,该方式合适于网页页面高宽比相当于当今显示屏视窗高宽比,按具体要求将会還是必须JS的。

到此这篇有关CSS应用calc()获得当今可视性显示屏高宽比的完成的文章内容就详细介绍到这了,大量有关CSS应用calc()获得当今显示屏高宽比內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服