OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

CSS3实现的响应式字体:自适应视图窗口大小的新单位


分享到
分类 编程技巧   关键字 前端   发布 ourjs  1419558567379
注意 转载须保留原文链接,译文链接,作者译者等信息。  

这个是为了解决什么问题?


我最近在做一个项目。客户要求标题可以根据用户屏幕的尺寸而自动改变大小。我知道我通常用的相对字体单位(注* 如px, pt, em)只是相对于HTML根元素的大小而自动改变,而不是相对于用户的屏幕。

在上网查询之后我发现一种新的字体大小单位,叫做:Viewport-Percentage Lengths.

我是在一MDN的一篇文章 中发现这个Viewport-percentage lengths的,这正是我要找的东西,我只是不知道它叫什么。

它是怎么工作的?


其实非常简单。一个单位相于当前视图窗口大小的1%,宽度和高度是不同的,分别用(vw, vh)表示。你可以通过vmin和vmax设置最大最小值。

  1vw = 当前视图窗口(viewport)1%的宽度
  1vh = 当前视图窗口(viewport)1%的高度
  1vmin = 1vw 或 1vh, 取决于哪个更小一点
  1vmax = 1vw 或 1vh, 取决于哪个更大一点


如果当前视图窗口宽度是100毫米,那么5vw就是5毫米。

vmin 和 vmax 的设置就像这样:

section {
 width: 100vmin;
 background-color: #ff5442;
}


示例


这里有一份完整的示例1示例2

注* Bootstrap之类的响应式布局CSS框架多采用 @media (max-width: *) {} 之类响应式样示实现。

// 屏幕宽度小于767个象素时应用的CSS样式
@media (max-width: 767px) {
   //CSS代码 
}

// 屏幕宽度在767和991象素之间的CSS样式
@media (min-width: 768px) and (max-width: 991px) {
   //CSS代码 
}

此法在大小在跨过临界值时才会发生改变。而vh,vw这样的单位会随窗口大小而立刻发生改变。

原文地址: 点此
社区评论 ( Beta版 )
  • #0 wall 1421244540979

    赞一个

  • #1 石召万 1436943770678

    有用!

  • #2 00 1440750176545

    赞赞赞,试了好多,只有这个有用

  • #3 虞双驰 1450250779815

    好用!

  • #4 池气又 1450834548110

    有用是有用 可他有些浏览区不兼容

  • #5 俞米外 1457684678588

    有用,谢谢楼主分享

  • #6 923971370 1457964068921

    【怎么学习网页制作】 现在很多小伙伴喜欢在互联网上找视频资料学习网页制作,但是光看视频你是不可能学会网页制作的,没有人指导你,而且很多视频已经过时了 并没有什么用! 如果你真的想学习网页制作这门技术,你可以来这个群【494064934】 在这里有最新的HTML课程 免费学习 不需要你付出什么 只要你有一颗学习的心就可以了

  • #7 谢执个 1459930424192

      -

    --

    ##

  • #8 施见示 1477967116657

    但是这个属性的在一些手机上兼容不好

  • #9 郎石入 1481789205941

    hack

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 2015年的JavaScript:Angular之类的框架将被库取代
  2. 2014年最受欢迎的前十大语言:JavaScript、PHP、Java排前三
  3. 提高NodeJS网站的安全性:Web服务器防黑客攻击技巧
  4. 主流JavaScript MVC框架性能比较测试:Angular vs Backbone vs Ember
  5. 为什么io.js要从Node.js中分裂出来?
  6. HTML5的TCP和UDP Web Socket API草案定稿
  7. JavaScript代码组织结构良好的5个特点[reuqire.js]
  8. io.js新图标logo征集中
  9. 避免Node.js中的命令行注入安全漏洞
  10. 在JavaScript的Array数组中调用一组Function方法
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 编程技巧
  1. 更快地定位DOM(HTML)元素的方法(Rails)
  2. Go语言实例教程基础语法:数组操作篇(二)
  3. 一些你不知道的JavaScript Console调试命令
  4. Go语言实例教程基础语法篇(一)
  5. 如何选择Node.js Web开发框架?
  6. 针对特定浏览器起作用的CSS: IE Chrome Firefox CSS Hack
  7. 创造canvas的艺术
  8. 有可能将CSS应用到一个字符的一半吗?
  9. Express.JS指南
  10. 在JavaScript中判断整型的N种方法

 关键字 - 前端
  1. 5个经典的前端面试问题
  2. AngularJS在大型单页面应用中的性能优化(一)
  3. 我们抛弃了AngularJS:单页面应用的5大缺陷
  4. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  5. 我被问得最多的十个JavaScript前端面试问题
  6. Animate.css让添加CSS动画像喝水一样容易
  7. 用纯css改变下拉列表select框的默认样式
  8. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的
  9. 10个值得前端收藏的CSS3动效库(工具)
  10. 前端开发工程师岗 招聘

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号