CSS3实现的响应式字体:自适应视图窗口大小的新单位
2015-07-15 23:50
651 查看
这个是为了解决什么问题?
我最近在做一个项目。客户要求标题可以根据用户屏幕的尺寸而自动改变大小。我知道我通常用的相对字体单位(注* 如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这样的单位会随窗口大小而立刻发生改变。
转自:http://ourjs.com/detail/549cbea78a34fa3204000024
相关文章推荐
- CSS 小知识
- 学习CSS(5)
- css text-overflow
- CSS3 伸缩布局盒模型记
- CSS 优化
- css3 多列布局使用
- VS2012不再有添加样式规则选项
- CSS3中box-shadow的用法介绍
- css3制作时钟
- 举例详解CSS3中的Transition
- 总结CSS3新特性(选择器篇)
- .Net学习笔记----2015-07-15(HTML+CSS练习)
- CSS居中效果之transform的使用
- CSS中使用table-cell法来达到居中效果
- CSS中使用Flexbox来达到居中效果的实例
- CSS中使用inline-block来进行居中的示例
- CSS (二)
- file 标签上传文件,直接样式太难看!隐藏它,通过别的按钮触发它,又会有IE兼容问题。
- CSS中使用负margin值来调整居中位置
- 获取图片颜色的rgb,以供css设计背景颜色