发现视口(窗口)自适应的新大陆!!vw、vh
从事前端已经1年了,一直为背景自适应铺满整个屏幕而苦苦发愁,因为要适配不同的pc显示器,所以高度不能写死,但是写(height:100%)并不能实现,愁死我了~我要不用写好的css框架实现或者自己写js页获取高度实现。有一天在看网上的也个页面,突然看到了vh引起了我的关注,网上查了查资料对于控制长度的值不止有px、rem、em等等,瞬间感觉好落伍。。。接下来带着大家回顾一下css中的长度单位。
一、单位介绍
| em | 相对长度单位。相对于当前对象内文本的字体尺寸。
|
|
| ex | 相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。
|
|
| cm | 厘米(Centimeters)。绝对长度单位。 | |
| mm | 毫米(Millimeters)。绝对长度单位。 |
|
| 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)
vw, vh, vmin(vm)这几个视区相关单位,在2017年12月26号这天的兼容性为:Chrome 49+, IE11部分支持、Edge16+、Fairefox56+、Chrome49+、safair10.1+、ios Safari10.2+ 等等。
发现视口(窗口)自适应的新大陆!!vw、vh的更多相关文章
- css3自适应布局单位vw,vh
css3自适应布局单位vw,vh 一.总结 一句话总结: vw和vh都是视图单位,分别为视图宽高的1% 1.vh/vw与%区别? %是相对于父元素,vh和vw是相对于视图高宽 % 百分比,相对长度单位 ...
- CSS3自适应字体大小(vw vh)
viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等. “viewpoint” = window size vw = 1% of viewpor ...
- css3自适应布局单位vw,vh你知道多少?
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- css3自适应布局单位vw,vh详解
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- [转]css3自适应布局单位vw,vh你知道多少?
原文地址:https://www.cnblogs.com/luxiaoxing/p/7544375.html 视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的 ...
- H5_0025:css3自适应布局单位vw,vh
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)
原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...
- 视区相关单位vw, vh..简介以及可实际应用场景
这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinx ...
- rem布局原理深度理解(以及em/vw/vh)
一.前言 我们h5项目终端适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对 ...
随机推荐
- 面向对象OO第9-11次作业总结
面向对象OO第9-11次作业总结 1.关于规格化设计的调研程序规格说明:对程序所应满足的要求,以可验证的方式作出完全.精确陈述的文件.“规格说明”一词与其他工业产品的“规格说明书”有相似的含义.不过, ...
- Go Going软件需求规格说明书
1.目标是什么,目标不包括什么? 我们软件的目标是让大学生走出校园,用最小的花费到更多的地方去,开阔视野,读万卷书再行万里路. 目标暂且不包括外校学生 2.用户和典型场景是什么? 用户:在校大学生 典 ...
- Hibernate笔记④--一级二级缓存、N+1问题、saveorupdate、实例代码
一级缓存及二级缓存 一级缓存也是Session 缓存 一个链接用户的多次查询使用缓存 跨用户 则无缓存 hibernate自带的 get和load都会填充并利用一级缓存 二级缓 ...
- Leetcode题库——33.搜索旋转排序数组
@author: ZZQ @software: PyCharm @file: search.py @time: 2018/11/12 18:12 要求:假设按照升序排序的数组在预先未知的某个点上进行了 ...
- 第一个spring冲刺总结
讨论成员:罗凯旋.罗林杰.吴伟锋.黎文衷 第一阶段总体是做到了运算的功能,只是一些基本的功能实现,包括APP进入动画,以及界面的基本效果设计,还有核心算法已经实现(可以计算括号 乘除法等等)“: 燃尽 ...
- 由RS-232串口到PROFIBUS-DP总线的转换接口设计
转自:http://gongkong.ofweek.com/2013-08/ART-310007-11001-28716256_2.html 1.PROFIBUS-DP网络协议 PROFIBUS的网络 ...
- LeetCode题解:(114) Flatten Binary Tree to Linked List
题目说明 Given a binary tree, flatten it to a linked list in-place. For example, Given 1 / \ 2 5 / \ \ 3 ...
- 蜗牛慢慢爬 LeetCode 6. ZigZag Conversion [Difficulty: Medium]
题目 The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows li ...
- 第六周PSP&进度条
团队项目PSP 一.表格: C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 讨论 讨论alpha完成情况并总结 9:40 11:20 17 ...
- 热部署在Eclipse和IDE里面的使用
热部署在Eclipse和IDE里面的使用 简介:讲解热部署的好处及使用注意事项,在eclipse里面默认开启,在IDE里面默认关闭 .增加依赖 <dependency> <group ...