对于720px的设计稿，100vw == 720px，1vw == 7.2px;

vw可以替代rem 实现自适应布局。

相应的计算插件：postcss-px-to-viewport

********

** 翻转屏幕后，vw和vh会相应的变化。

　　比如：100vh，竖屏时相当于600px，横屏时则相当于320px。

参考：大漠自适应布局：http://www.w3cplus.com/css/vw-for-layout.html

css3宽高设置：calc() / vw / vh的更多相关文章

  1. Qt TabWidget QTabBar 宽高设置

    /*************************************************************************** * Qt TabWidget QTabBar ...

  2. IE6和IE7中<a>标签宽高设置无效的问题

    昨天写了一个引导界面, 发现界面中的IE67存在一个问题, 在某些情况下,  A锚链接如果设置了宽高,而且position:absolute的情况下, A标签的宽高无效, 至于总体的效果, 因为这个A ...

  3. JQuery的方便之处——宽高设置、坐标值和滚动条+事件绑定机制

    1.元素的宽高 可以通过css来进行设置,例如:$("元素").css({"宽度":"值","高度":"值&q ...

  4. 根据设备宽高设置View的大小

    得到设备屏幕宽高: WindowManager wManager = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE); ...

  5. 为什么canvas宽高要设置在标签内>>宽高设置在style和设置在canvas的区别

    一直很困惑为什么canvas标签和其他标签不一样,宽高需要设置在canvas标签里,设置在style里就会有问题. 纯粹个人理解,有错误欢迎指出. > 结论写在头 设置在style里有问题其实是 ...

  6. ios UIWebView加载HTMLStr图文，关于图片宽高设置，webView内容实际高度的踩坑问题

    一.关于UIWebView 与 WKWebView 选取问题 从发布时间看: 2008年7月11日,在新一代iPhone3G正式发售当天,iPhone OS 2.0(iOS 2.0)推出,这时候就有U ...

  7. div宽高设置为百分比

    如果你将div的width和height设置为百分比,但是发现页面都不见了,这是因为父标签也要设置为百分比,也就是说body和html的宽高也需要设置为百分比 #containter{ width:1 ...

  8. nopi使用 设置列样式 宽高 设置分页符

    HSSFWorkbook book = new HSSFWorkbook(); ISheet sheet = book.CreateSheet("test_01"); sheet. ...

  9. A4纸网页打印——宽高设置

    一.在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dot Per Inch)指标. 经过我仔细的测试,发现了网页打印中,默认采用的是96dpi,并非传闻的72dpi . A4纸张的尺寸是2 ...

随机推荐

  1. You Don't Know JS: Async & Performance（第一章， 异步：now & later）

    Chapter 1: Asynchrony: Now & Later 在一门语言中,比如JavaScript, 最重要但仍然常常被误解的编程部分是如何在一个完整的时间周期表示和操作程序行为. ...

  2. Postman发包form-data、x-www-form-urlencoded、raw、binary的区别

    首先普及下http的Post四种Content-Type Postman中post编码方式form-data.x-www-form-urlencoded.raw.binary的区别 x-www-for ...

  3. 2.5 UML顺序图

    相关概念 交互 对象之间为实现某一功能而必须实施的协作过程.动态行为,称为交互 消息 对象间的协作与交流表现为一个对象以某种方式启动另一个对象的活动,这种交流在 UML里被定义为消息 顺序图的建模元素 ...

  4. grid 用于同一用例在不同测试环境下的测试结果

    步骤: 1.http://www.seleniumhp.org/download   下载selenium standalone server 2.配置java环境 3.运行selenium serv ...

  5. Linear Kingdom Races CodeForces - 115E (线段树优化dp)

    大意: n条赛道, 初始全坏, 修复第$i$条花费$a_i$, m场比赛, 第$i$场比赛需要占用$[l_i,r_i]$的所有赛道, 收益为$w_i$, 求一个比赛方案使得收益最大. 设$dp[i]$ ...

  6. 『TensorFlow』第十弹_队列&多线程_道路多坎坷

    一.基本队列: 队列有两个基本操作,对应在tf中就是enqueue&dequeue tf.FIFOQueue(2,'int32') import tensorflow as tf '''FIF ...

  7. react-native run-ios时报错xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

    命令行运行react-native 项目时,报错:xcrun: error: unable to find utility "instruments", not a develop ...

  8. kohana task 编写计划任务

    kohana 框架  我们经常使用gleez作为我们二次开发. 收先我们要把文件建在Task文件夹下,比如新建文件为:testcron <?phpdefined('SYSPATH') or di ...

  9. laravel响应的发送和程序终止

    响应的发送是通过index.php中的$response->send();实现的 vendor\symfony\http-foundation\Response.php public funct ...

  10. nodejs--路径问题

    在读写模块中,需要引入读写文件,此时需要注意路径问题.Node.js中为我们提供了两个参数:__dirname和__filename. __dirname:全局变量,存储的是文件所在的文件目录 __f ...