css中vw和vh的知识点
引用文档：http://caibaojian.com/vw-vh.html；
http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/；
http://blog.csdn.net/ZNYSYS520/article/details/76053961
周六和同事讨论问题时，突然聊到了vw和vh，今天整理了一下vw和vh的一些小知识点吧，日后可以自己复习的时候看看。
什么是viewport?
视窗的概念在浏览器端指的是浏览器的可视区域；而在移动端则相对复杂，它涉及到3个视口：Layout Viewport(布局视口),Visual Viewport(视觉视口)、Ideal Viewport(虚拟视口),在移动端指的是Layout Viewport
什么是vw，vh，vmax,vmin？
vw,vh,vmax,vmin是一种视窗单位，同时也是一种相对单位；它们相对的是视窗（viewport）的大小；单位1，代表相对于视窗大小的1%；
vw:1vw代表视口宽度的1%；
vh:1vh代表视口高度的1%;
vmax:选取vw/vh中最大的一个；
vmin：选取vw/vh中最小的一个；
与百分比%的区别
百分比%相对于其父元素或者其祖先元素的宽度/高度；
vw/vh相对于视窗大小的宽度/高度；vw/vh的优势在于能够直接获取高度，而百分比%则需要在设置body的高度
vmax、vmin的用处
在做移动端开发时，如果使用vw、vh设置字体大小时，在横屏和竖屏情况下是不一样大的；vmax和vmin是当前较大的vw和vh和当前较小的vw和vh，这种情况下，可以设置让字体在横竖屏现实的大小一样。
兼容性
PC端：
Chrome：自 26 版起就完美支持（2013年2月）
Firefox：自 19 版起就完美支持（2013年1月）
Safari：自 6.1 版起就完美支持（2013年10月）
Opera：自 15 版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）
移动端：
Andriod:自4.4版起就完美支持；
iOS：自ios8起支持
实例展示:
1、vw和vh的简单示例代码
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>视窗vw/vh的使用</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
font-size: 2vw;
}
.container {
width: 100vw;
border: 1px solid #ddd;
}
.container .textPart {
font-size: 2vw;
}
.container img {
width: 100vw;
}
.colorBox {
border: 1px solid #dddddd;
display: flex;
margin-bottom: 10vh;
}
.colorBox .redBox {
width: 40vw;
height: 40vh;
background-color: #ee4433;
}
.colorBox .blueBox {
width: 6vw;
height: 60vh;
background-color: deepskyblue;
}
.colorBox .grayBox {
width: 4vw;
height: 40vh;
background-color: gray;
}
</style>
</head> <body>
<div class="container">
<img src="http://jdc.jd.com/img/750x340" alt="图片">
<p class="textPart">
图片介绍：Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci debitis nobis magni necessitatibus molestias pariatur? Beatae consequuntur fugit amet, unde maiores, eaque a dignissimos, quaerat vero deserunt excepturi dolorum. Tempora?
</p>
</div>
<div class="colorBox">
<div class="redBox">红色盒子</div>
<div class="blueBox">蓝色盒子</div>
<div class="grayBox">灰色盒子</div>
</div> </body> </html>
2、vw、vh、rem的搭配使用实例代码（这样使布局更优化）
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>rem和vw搭配使用</title>
</head>
<body>
<div class="container">
<img src="http://jdc.jd.com/img/750x340" alt="图片">
<p class="textPart">
图片介绍：Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci debitis nobis magni necessitatibus molestias pariatur? Beatae consequuntur fugit amet, unde maiores, eaque a dignissimos, quaerat vero deserunt excepturi dolorum. Tempora?
</p>
</div>
<div class="colorBox">
<div class="redBox">红色盒子</div>
<div class="blueBox">蓝色盒子</div>
<div class="grayBox">灰色盒子</div>
</div>
</body>
</html>
CSS代码
html {
font-size: 16px;
}
@media screen and (min-width: 375px) {
html {
/* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
font-size: calc(85.8974359%);
font-size: calc(1.8974359px);
}
}
@media screen and (min-width: 414px) {
html {
/* 414px-1000px每100像素宽字体增加1px(18px-22px) */
font-size: calc(110.35665529%);
font-size: calc(15.85665529px);
}
}
@media screen and (min-width: 600px) {
html {
/* 600px-1000px每100像素宽字体增加1px(20px-24px) */
font-size: calc(120%);
font-size: calc(15px);
}
}
@media screen and (min-width: 1000px) {
html {
/* 1000px往后是每100像素0.5px增加 */
font-size: calc(132.1%);
font-size: calc(16.6px);
}
}
.container img {
width: 100%;
border: 1px solid #ee4433;
}
.container .textPart {
font-size: 1rem;
}
.colorBox {
border: 1px solid #ddd;
display: flex;
justify-content: space-between;
}
.colorBox .redBox {
width: 11rem;
height: 8rem;
background-color: #ee4433;
}
.colorBox .blueBox {
width: 6rem;
height: 8rem;
background-color: deepskyblue;
}
.colorBox .grayBox {
width: 4rem;
height: 8rem;
background-color: gray;
}
css中vw和vh的知识点的更多相关文章
- CSS中vw和vh单位的使用
vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%: vh——viewpoint height,视窗高度,1vh等于视窗高度的1%:例子:http://tutorialzine ...
- css中vw,vh单位对于UC的兼容性问题
vw,vh单位在移动端浏览器不兼容,在网上找半天也没找到什么官方的解决方法:我就试了一下在使用到vh的单位之前添加一个用px定义的样式: 如: 当浏览器不是别100vw单位的时候 就会赋给px单位的样 ...
- CSS 中的rem，em，vh，vw一次说清楚
关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...
- css中单位px,em，rem和vh/vw的理解
>px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...
- CSS中的单位px、em、rem、%、vw、vh、vm
px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...
- css中px em rem vw vh vmax vmin等单位的区别--转载
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
- CSS中的自适应单位vw、vh、vmin、vmax
1.vw.vh.vmin.vmax各单位的意义 上面的自适应单位可以统称为视口单位. 可以先了解一下视口指的是什么? 在PC端,视口指的是在PC端,指的是浏览器的可视区域:而在移动端,它涉及3个视口: ...
- CSS的一些单位，如rem、px、em、vw、vh、vm
总结了一下一些单位的不同 px:像素(pixel)相对长度单位,,是相对于屏幕显示器分辨率而言的: em:em的值并不是固定的,会集成父级元素的字体大小: 注意: 1.body选择其中声明Font-s ...
- Css单位px，rem，em，vw，vh的区别
px px就是pixel像素的缩写,相对长度单位,网页设计常用的基本单位.像素px是相对于显示器屏幕分辨率而言的 em em是相对长度单位.相对于当前对象内文本的字体尺寸(参考物是父元素的font-s ...
随机推荐
- Flask中的CBV和上下文初步解读
一 . flask中的CBV 相对于Django中的CBV,让我们来看看flask中的CBV是如何实现的 ? from flask import Flask, render_template, url ...
- sqrt源码
先找出接近m的浮点数,然后通过下面的不等式中的等于条件得到其平方根. #include <iostream> #include <math.h> using namespace ...
- hihocoder #1152 Lucky Substrings 【字符串处理问题】strsub()函数+set集合去重
#1152 : Lucky Substrings时间限制:10000ms单点时限:1000ms内存限制:256MB描述A string s is LUCKY if and only if the nu ...
- 关于RabbitMQ简介
RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然在同步消息通讯的世界里有很多公开标准 ...
- IP服务-计算机网络
如需转载请联系:fengxw6@mail2.sysu.edu.cn 未经许可,禁止转载,私人笔记,码字不易,望理解. ---Sun Yat-sen University 冯兴伟 本节主要就讲网络层的各 ...
- 检测 iOS 系统网络权限被关闭
背景 一直都有用户反馈无法正常联网的问题,经过定位,发现很大一部分用户是因为网络权限被系统关闭,经过资料搜集和排除发现根本原因是: 第一次打开 app 不能访问网络,无任何提示 第一次打开 app 直 ...
- JavaScript--Object类
Object类是所有JavaScript类的基类,提供了一种创建自定义对象的简单方式,不需要程序员再定义构造函数. 主要属性: constructor-对象的构造函数 prototype-获得类的pr ...
- c语言字符串 数字转换函数大全
最近学数据结构老是做实验 常用到字符串和数字的转换 想找却发现网上的资料太散 所以搜集整理一下 方便以后再用 atof(将字符串转换成浮点型数) atoi(将字符串转换成整型数) atol(将字符串转 ...
- 1091 Acute Stroke (30)（30 分）
One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. Given the re ...
- ACM学习历程——POJ3468 A Simple Problem with Integers（线段树）
Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...