文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/

原文链接：http://www.zhangxinxu.com/wordpress/?p=5583
原文摘要：

视区相对单位？

就是相对于浏览器viewport尺寸的单位，具体包括下面4个：

  • vw – 视区宽度百分值
  • vh – 视区高度百分值
  • vmin – vw或vh，取小的那个
  • vmax – vw或vh，取大的那个

【转载】基于vw等viewport视区相对单位的响应式排版和布局的更多相关文章

  1. px单位html5响应式方案

    移动端h5响应式方案最近这几年用得最多的最多的就是rem方案了.这个需要计算根元素的font-size来实现响应式. 但这种方案也有一个缺点,那就是font-size不为整数的时候一些字体使用rem单 ...

  2. 基于vw的响应式排版布局

    html{ /*iphone6的375px尺寸作为16px基准,600px时字体大小为18px*/ font-size: calc(100% + 2 * (100vw - 375px) / 225); ...

  3. 基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理

    说明: .NET Core版本为:2.2 AdminLTE版本为:2.4.18 Bootstrap版本为:3.4.1 font-awesome版本为:4.7.0 1.新建项目:AdminLteDemo ...

  4. 视区相关单位vw, vh..简介以及可实际应用场景——张鑫旭

    一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰 ...

  5. 视区相关单位vw, vh..简介以及可实际应用场景

    这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinx ...

  6. css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  7. css新单位vw,vh在响应式设计中的应用

    考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...

  8. python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  9. 【学习笔记】响应式布局的常用解决方案（媒体查询、百分比、rem、和vw/vh）

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

随机推荐

  1. 五个数据段之代码段、数据段、BSS、栈、堆

    继上文讲完了对内存管理的一些知识,下面笔者再对上篇文章的内容加以拓展,那么我们今天就来说一说5个数据段 五个数据段 进程(执行的程序)会占用一定数量的内存,它或是用来存放磁盘载入的程序代码,或是存放取 ...

  2. 团队作业9——测试与发布（Beta版本）

    Deadline: 2017-6-5 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的两个方面 测试报告 发布说明 展示博客(单独一篇博客) 晚交 - 0分 迟交 ...

  3. 201521123073 《Java程序设计》第6周学习总结

    1. 本章学习总结 2. 书面作业 1.clone方法 1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 1.2 自己设计类时,一 ...

  4. 201521123024 《Java程序设计》第5周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 不能编 ...

  5. 201521123097《Java程序设计》第三周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  6. 201521123012 《Java程序设计》第一周学习总结

    一.本章学习内容 1.了解了JDK.JRE .JVM. 2.大概看过了Java的诞生.版本演进(JDK1.1.4,JDK1.1.5--JDK1.1.8,J2SE1.2--Java SE 8)以及三大平 ...

  7. Python[小甲鱼005Python的数据类型]

    一.数值类型 整形 布尔类型        True 和 False  即1和0 浮点型 e记法                e ,例如      1.5e11 = 150000000000     ...

  8. 201521123075 《Java程序设计》第14周学习总结

    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) 参 ...

  9. 201521123026 《java程序设计》 第九周学习总结

    1. 本章学习总结 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 Q1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) PTA提交结果: 运行结果截图: 1.2 ...

  10. Eclipse dynamic web project 插件

    下载了Eclipse Oxygen   发现没有Dynamic web  Project 首先我们先了解下Dynamic  Web Project  If you want to create a c ...