一、前言:

响应式web设计离不开百分比。但是,CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该怎么办?

二、“vh” & “vw”:

vh:相对于视窗的高度:视窗高度是100vh。

vw:相对于视窗的宽度:视窗宽度是100vw。

视窗的10%: 0
视窗的25%: 0
视窗的50%: 0
视窗的100%高度
(看我!!!)

看我!!!看我...!!!我是浏览器视窗的宽度(你可以通过改变浏览器宽度看我的变化):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”的更多相关文章

  1. 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...

  2. 关于CSS单位:rem vh vw vmin vmax

    rem(root em) 如果你给body设置了font-size字体大小,那么body的任何子元素的1em就是等于body设置的font-size demo: body {  font-size: ...

  3. 理解并使用CSS3中的单位rem vh vw vmin vmax

    rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们. rem 如果你给body设置了font-size字体大小,那么body的任何子元素的1e ...

  4. CSS中的 vh/vw

    vh 相对于当前窗口的大小,我用electron-vue来开发一个桌面应该,就用到这个,很方便,百分比需要外面有一个固定的高度,依赖父元素

  5. Css单位px,rem,em,vw,vh的区别

    px px就是pixel像素的缩写,相对长度单位,网页设计常用的基本单位.像素px是相对于显示器屏幕分辨率而言的 em em是相对长度单位.相对于当前对象内文本的字体尺寸(参考物是父元素的font-s ...

  6. rem和em和px vh vw和% 移动端长度单位

    1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成 ...

  7. 尺寸单位em,rem,vh,vw

    这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...

  8. CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax

    本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去 ...

  9. CSS单位计算总结

    CSS单位总结 公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div& ...

随机推荐

  1. webapi框架搭建-数据访问ef code first

    webapi框架搭建系列博客 为什么用ef? 我相信很多博友和我一样都有这种“选择困难症”,我曾经有,现在也有,这是技术人的一个通病——总想用“更完美”的方式去实现,导致在技术选择上犹豫不决,或总是推 ...

  2. 应用jfinal时要注意区分Db.query和Db.find

    jfinal有一个特别好的地方,sql查询的时候可以直接查record.但是要注意query和find的区别. query返回的是List<object>,find返回的才是List< ...

  3. Java 避免精度丢失之BigDecimal 运算

    * 由于Java的简单类型不能够精确的对浮点数进行运算,这个工具类提供精确的浮点数运算,包括加减乘除和四舍五入 import java.math.BigDecimal; /** 计算工具类 */ pu ...

  4. 【mybatis笔记】 resultType与resultMap的区别

    序言: 昨天做一个项目,看到很多刚开始用mybatis的同事对于resultType和resultMap的理解与使用含糊不清,这里我试图用最好理解的说法写一写,欢迎大家勘误. 两者异同: 相同点:re ...

  5. bzoj 3676 [Apio2014]回文串(Manacher+SAM)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3676 [题意] 给定一个字符串,定义一个串的权值为长度*出现次数,求最大权的回文子串. ...

  6. CodeForces - 1040B Shashlik Cooking

    Long story short, shashlik is Miroslav's favorite food. Shashlik is prepared on several skewers simu ...

  7. python加速包numba并行计算多线程

    1.下面直接上代码需要注意的地方numba的官网找到 1)有一些坑自己去numba的官网找找看,下面是我的写的一个加速的程序,希望对你有帮助. #coding:utf-8 import time fr ...

  8. Python概念-反射之文化底蕴版:反正射了

    什么是反射 光在两种物质分界面上改变传播方向又返回原来物质中的现象,叫反射! 以上,是反射的物理定义,与python中的反射概念,完全没有任何关系 书归正传:反射 就是通过字符串的形式,操作对象相关的 ...

  9. JS设计模式——11.适配器模式

    适配器模式概述 适配器模式可用来在现有接口和不兼容的类之间进行适配.使用这种模式的对象又叫包装器(wrapper). 适配器特点 从表面看,适配器模式很像门面模式.她们都要对别的对象进行包装并改变其呈 ...

  10. UNIX网络编程 第8章 基本UDP套接字编程

    UDP是无连接的,不需要accept,TCP通过accept API来接受连接,并且将连接客户端的信息写入到accept将返回的新socket中,该新socket中有服务端和客户端的IP地址和端口,因 ...