移动端css单位之 “vh” & “vw”
一、前言:
响应式web设计离不开百分比。但是,CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该怎么办?
二、“vh” & “vw”:
vh:相对于视窗的高度:视窗高度是100vh。
vw:相对于视窗的宽度:视窗宽度是100vw。
(看我!!!)
看我!!!看我...!!!我是浏览器视窗的宽度(你可以通过改变浏览器宽度看我的变化):0
三、源码:
CSS:
.demo-1,.demo-2,.demo-3{margin-bottom:10px; padding:10px 0; line-height: 30px; color: #fff; text-indent: 10px;}
.demo-1 strong,.demo-2 strong,.demo-3 strong{color:#fff !important;}
.demo-1{width:10vw; background: #1ab5e3;}
.demo-2{width:25vw; background: #FF5F09;}
.demo-3{width:50vw; background: #28AF59;}
.demo-4{position: fixed; z-index: 10; top: 0; left: 0; width: 150px; height: 100vh; color: #fff; background: rgba(0,0,0,.5);}
.demo-4 span{position:absolute; top:50%; display:block; padding: 0 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
HTML:
<div class="demo-1">视窗的10%: <strong class="js-getVW1">0</strong></div>
<div class="demo-2">视窗的25%: <strong class="js-getVW2">0</strong></div>
<div class="demo-3">视窗的50%: <strong class="js-getVW3">0</strong></div>
<div class="demo-4"><span>视窗的100%高度<br/>(看我!!!)</span></div>
<p class="btn-normal">看我!!!看我...!!!我是浏览器视窗的宽度(你可以通过改变浏览器宽度看我的变化):<span class="js-viewWidth">0</span></p>
JS:
$(function(){
//视窗宽度改变函数
function resizeWindow(){
var viewWidth = window.innerWidth;
$('.js-viewWidth').html(viewWidth);
$('.js-getVW3').html(viewWidth/2);
$('.js-getVW2').html(viewWidth/4);
$('.js-getVW1').html(viewWidth/10);
} //初始化
resizeWindow(); //浏览器视窗改变时调用上面定义的函数
$(window).resize(function(event) {
resizeWindow();
});
});
备注:因为博客园限制了文章中js的写入效果(哈哈哈,估计是涉及到安全问题),有兴趣的同学可以访问我的个人博客相关文章:http://www.yuanbo88.com/article.html?rid=44。
移动端css单位之 “vh” & “vw”的更多相关文章
- 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch
rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...
- 关于CSS单位:rem vh vw vmin vmax
rem(root em) 如果你给body设置了font-size字体大小,那么body的任何子元素的1em就是等于body设置的font-size demo: body { font-size: ...
- 理解并使用CSS3中的单位rem vh vw vmin vmax
rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们. rem 如果你给body设置了font-size字体大小,那么body的任何子元素的1e ...
- CSS中的 vh/vw
vh 相对于当前窗口的大小,我用electron-vue来开发一个桌面应该,就用到这个,很方便,百分比需要外面有一个固定的高度,依赖父元素
- Css单位px,rem,em,vw,vh的区别
px px就是pixel像素的缩写,相对长度单位,网页设计常用的基本单位.像素px是相对于显示器屏幕分辨率而言的 em em是相对长度单位.相对于当前对象内文本的字体尺寸(参考物是父元素的font-s ...
- rem和em和px vh vw和% 移动端长度单位
1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成 ...
- 尺寸单位em,rem,vh,vw
这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...
- CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax
本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去 ...
- CSS单位计算总结
CSS单位总结 公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div& ...
随机推荐
- redis连接池 jedis-2.9.0.jar+commons-pool2-2.4.2.jar
java使用Redis连接池 jar包为 jedis-2.9.0.jar+commons-pool2-2.4.2.jar jar下载地址 package com.test; import redis ...
- wsimport生成客户端 指定编码格式
wsimport -encoding utf- -keep -s D:\temp -p com.lawyer.user -verbose http://服务地址?wsdl -encoding : 指定 ...
- 2017 清北济南考前刷题Day 2 morning
期望得分:100+30+60=190 实际得分:100+30+30=160 T1 最优方案跳的高度一定是单调的 所以先按高度排序 dp[i][j] 跳了i次跳到j 枚举从哪儿跳到j转移即可 #incl ...
- 基于Ubuntu16.04搭建WordPress
安装 Apache2 在终端输入该命令 ,使用 apt-get 安装 Apache2: sudo apt-get install apache2 -y 安装好后,您可以通过访问实验室IP地址 http ...
- Git之初始化及提交操作
Git 的配置文件有三个: Git 把管理的文件分为了两个区域四个状态: 工作区: 当前开发程序所在目录称为工作区,该区域的文件会有状态的变化且状态由 git自动检测,程序中文件做任何操作(增.删.改 ...
- eclipse配置hadoop插件
1. 版本信息 eclipse windows 64 bit hadoop 2.5.2 64 bit hadoop eclipse-plug 2.5.2 2. 下载hadoop-2.5.2.t ...
- caffe的特殊层
每次写博客都带有一定的目的,在我看来这是一个记录的过程,所以尽量按照循序渐进的顺序逐步写,前面介绍的CNN层应该是非常常用的,这篇博客介绍一下某些特殊的layer,但是由于特殊的layer都带有一定的 ...
- 29、HashSet简介
Set的特点 Set里面存储的元素不能重复,没有索引,存取顺序不一致. package com.monkey1024.set; import java.util.HashSet; /** * Set的 ...
- Java设计模式——工厂模式
一.工厂模式分类 工厂模式主要是为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的. 工厂模式在<Java与模式>中分为三类: (1)简单工厂模式(Simp ...
- souce insight出错 There was an error opening project
souce insight出错 There was an error opening project: "...": Options->Preferences->Fol ...