zoukankan      html  css  js  c++  java
  • 发现视口(窗口)自适应的新大陆!!vw、vh

      从事前端已经1年了,一直为背景自适应铺满整个屏幕而苦苦发愁,因为要适配不同的pc显示器,所以高度不能写死,但是写(height:100%)并不能实现,愁死我了~我要不用写好的css框架实现或者自己写js页获取高度实现。有一天在看网上的也个页面,突然看到了vh引起了我的关注,网上查了查资料对于控制长度的值不止有px、rem、em等等,瞬间感觉好落伍。。。接下来带着大家回顾一下css中的长度单位。

    一、单位介绍

    em 相对长度单位。相对于当前对象内文本的字体尺寸。
    • 如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
     
    ex 相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。
    • 如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
     
    cm 厘米(Centimeters)。绝对长度单位。  
    mm 毫米(Millimeters)。绝对长度单位。
    • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
    q 1/4毫米(quarter-millimeters)。绝对长度单位。
    in 英寸(Inches)。绝对长度单位。
    pt 点(Points)。绝对长度单位。
    pc 派卡(Picas)。绝对长度单位。相当于我国新四号铅字的尺寸。
    px 相对长度单位。像素(Pixels)。[常用]
    ch 数字“0”的宽度  
    rem 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数  
    vh 相对于视口(窗口)的高度;全屏就是100vh  
    vw 相对于视口(窗口)的宽度;全屏就是100vw等同于100%;  
    vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax  
    vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin  

    二、兼容性(vh、vw、vmax、vmin)

      vwvhvmin(vm)这几个视区相关单位,在2017年12月26号这天的兼容性为:Chrome 49+, IE11部分支持、Edge16+、Fairefox56+、Chrome49+、safair10.1+、ios Safari10.2+ 等等。

  • 相关阅读:
    Spring Boot 使用 Dom4j XStream 操作 Xml
    Spring Boot 使用 JAX-WS 调用 WebService 服务
    Spring Boot 使用 CXF 调用 WebService 服务
    Spring Boot 开发 WebService 服务
    Spring Boot 中使用 HttpClient 进行 POST GET PUT DELETE
    Spring Boot Ftp Client 客户端示例支持断点续传
    Spring Boot 发送邮件
    Spring Boot 定时任务 Quartz 使用教程
    Spring Boot 缓存应用 Memcached 入门教程
    ThreadLocal,Java中特殊的线程绑定机制
  • 原文地址:https://www.cnblogs.com/wyd168/p/8118917.html
Copyright © 2011-2022 走看看