基于视口单位的网页排版
holyzhou
8年前
<p>在之前的两篇关于构建模块化的文章中，谈到了 <a href="/misc/goto?guid=4959673709134709504" rel="nofollow,noindex">rem & em</a> 和 <a href="/misc/goto?guid=4959673709224425103" rel="nofollow,noindex">响应式排版</a> ，而在文章的评论中，对基于视口单位的网页排版抱有很大的想象空间。</p> <p>由于视口单位涉及到计算，有一段时间我是抵制在工作使用视口单位。但就在上周，我克服了心中的抵制情绪，开始去了解视口单位在网页排版中的使用。在深入介绍视口单位以及其在网页排版中的工作原理时，先了解下有哪些常见的视口单位。</p> <h3>视口单位是什么？</h3> <p>在 CSS 规范中，有4种类型的可用视口单位：</p> <ul> <li>vw — 1vw 等于视口宽度的 1%</li> <li>vh — 1vh 等于视口高度的 1%</li> <li>vmin — vw 和 vh 中的较小值</li> <li>vmax — vw 和 vh 中的较大值</li> </ul> <p>视口，即浏览器屏幕大小，1vw 等于浏览器宽度的 1%，100vw 即整个浏览器的宽度。</p> <p><img src="https://simg.open-open.com/show/2bb9efd2a13fe6ce566a20f51b927840.png"></p> <p>视口的单位大小会根据视口大小的改变自动计算，视口大小的改变常发生于页面加载、页面缩放或者屏幕方向的改变(横纵切换)。正因为如此，创建一个大小总为视口四分之一大小的容器是非常容易滴：</p> <pre> <code class="language-css">.component { width: 50vw; height: 50vh; background: rgba(255, 0, 0, 0.25) } </code></pre> <p><img src="https://simg.open-open.com/show/5adf3e79872af1e6d15f1fc15bf6e237.gif"></p> <h3>将视口单位用于网页排版</h3> <p>将视口单位用于网页排版的唯一理由就是视口的单位大小会根据客户端浏览器的视口大小自动计算。也就是说，我们不必明确地通过媒体查询来声明字体大小。举个demo来简要说明一下。</p> <p>代码如下，将断点设置为 800px，字体大小从 16px 变为 20px：</p> <pre> <code class="language-css">// Note: CSS are all written in SCSS html { font-size: 16px; @media (min-width: 800px) { font-size: 20px; } } </code></pre> <p>对于上述代码，当视口大小是 800px 时，字体会从 16px 突变 到 20px。在响应式排版中，这是经常采用的方式。有时，你会碰到在两个断点之间添加额外的媒体查询来确保页面排版适应所有设备：</p> <pre> <code class="language-css">html { font-size: 16px; @media (min-width: 600px) { font-size: 18px; } @media (min-width: 800px) { font-size: 20px; } } </code></pre> <p>尽管这样做能达到效果，但需要更多特定的媒体查询规则和字体大小。通常，会选择 3~4 中字体大小。</p> <p>但是，如何不同媒体查询或字体大小的设置来达到同样的效果呢？</p> <p>当然是有滴，这就是视口单位的用处了。你可以用视口单位来表示字体大小：</p> <pre> <code class="language-css">html { font-size: 3vw; } </code></pre> <p><img src="https://simg.open-open.com/show/7f5c03cb9c453cd91c4b7640a569b574.gif"></p> <p>是不是很棒？一段简短的代码就实现了适配。但也有明显的缺点，就是视口的单位大小是根据设备屏幕的视口大小计算的，对于小屏幕设备(如宽度 320px 的手机)，字体太小，难以阅读；对于大屏幕设备(如宽度 1440px 的笔记本)，字体会变的非常大，同样也会难以阅读。</p> <p>所以，现在面临的一个有意思的挑战是—怎么解决不同设备的视口宽度对视口单位计算的影响？一种简单地方式是设置 font-size 的最小值，然后通过 calc() 属性来动态计算小屏幕设备上的字体大小值：</p> <pre> <code class="language-css">html { font-size: calc(18px + 0.25vw) } </code></pre> <p>参考 Mike Riethmuller 的 <a href="/misc/goto?guid=4959673709301845392" rel="nofollow,noindex">Precise control over responsive typography</a></p> <p>但是，不是所有的浏览器都支持 calc() 的这种计算方式(px+vw)。解决方式也很简单，结合使用百分比和 vw 用于 calc 计算能获得更好地浏览器支持：</p> <pre> <code class="language-css">html { font-size: calc(112.5% + 0.5vw) } </code></pre> <p><img src="https://simg.open-open.com/show/f56cb4a14bd73a9a05ea15c19145868e.gif"></p> <p>下一个需要克服的挑战就是用视口单位来设置排版元素(h1-h6)的字体大小。</p> <h3>用视口单位设置其它排版元素的字体大小</h3> <p>首先，我创建一个 <h1> 元素，将其字体大小设置为body 的两倍：</p> <pre> <code class="language-css">html { font-size: calc(112.5% + 0.25vw) } h1 { font-size: calc((112.5% + 0.25vw) * 2); } </code></pre> <p><img src="https://simg.open-open.com/show/3c54d9d255371db7512836456e805dcd.png"></p> <p>我试图将 html 元素的字体大小乘以2，但并不可行，对于 <h1> ，字体大小是基于百分比计算的。在字体大小继承了 <html> 的大小之后，又重新计算了 <h1> 的字体大小。</p> <p>现在假设视口宽度是 800px，默认的 font-size 是 16px：</p> <ul> <li>对于 html 元素，112.5% 意味着 font-size 是 18px(112.5/100 * 16px)</li> <li>0.25vw == 2px(800px * 0.25/100)</li> <li>所以， html 的 font-size 的最终值是 20px(18px + 2px)</li> </ul> <p>按照同样的方法来计算 h1 元素的 font-size ，但需要特别注意的是此时百分比(112.5%)的相对计算量值：</p> <ul> <li>对于 h1 元素，112.5% 意味着 font-size 是 22.5px(112.5/100 * 20px)</li> <li>0.25vw == 2px(800px * 0.25/100)</li> <li>所以， h1 的 font-size 的最终值是 49px((22.5px + 2px) * 2)</li> </ul> <p>这与最初想把 h1 元素的 font-size 设置成 Body 的两倍大小的想法相违背。但我们知道了造成差异的原因是由于 h1 继承了 html 的 font-size，有两种方式来解决这个问题。</p> <p>第一种方式就简单滴将 112.5% 改为 100%：</p> <pre> <code class="language-css">h1 { font-size: calc((100% + 0.25vw) * 2) } </code></pre> <p>第二种方式是确保 font-size 不被跨元素继承：</p> <pre> <code class="language-css">h1 { font-size: calc((100% + 0.25vw) * 2) } p { font-size: calc((100% + 0.25vw)) } </code></pre> <p>这两种方式看起来有点 hack，看起来不爽，于是又继续尝试其它方法。最终，最干净的方式是使用 <a href="/misc/goto?guid=4959673709134709504" rel="nofollow,noindex">Rem & Em</a> :</p> <pre> <code class="language-css">html { font-size: calc(112.5% + 0.25vw) } h1 { font-size: 2em; } </code></pre> <p><img src="https://simg.open-open.com/show/3235fa94ebc73e228700f8fae59c1a8c.png"></p> <p>既然讲到了字体大小的计算，那接下来的问题是： 视口单位的垂直和标准化计算是怎么样的？</p> <h3>视口单位的垂直和标准化计算</h3> <p>这个相对比较容易回答。不知是否注意到，视口单位常仅被用于 html 元素？其它元素仍用 rem 和 em 作为计算的单位。</p> <p>这就意味着，你仍然能使用 rem 和 em 用于视口单位的垂直和标准化计算，这和我之前在 <a href="/misc/goto?guid=4959673709394709322" rel="nofollow,noindex">Everything I Know about Responsive Typography</a> 一文中讨论的一样。</p> <p>结束这篇文章之前，最后一个需要谈到的问题是：要怎么样去计算 vw 的值，才能在视口宽度是 800px 时，排版的字体大小为 20px？很多人问到了这个问题，因而，将这个问题简化成一个词就是—精确。换句话说，如何才能字体大小更加精确？</p> <h3>精确</h3> <p>结果是，Mike 已经替我解决了这个问题，我只需要再简单解释下计算方式。</p> <p>假设你要处理下面两种情况：</p> <ul> <li>视口宽度是 600px 时，font-size 是 18px</li> <li>视口宽度是 1000px 时，font-size 是 20px</li> </ul> <p>首先，我们必须将较小的 font-size 值转为百分比。第一部计算是：calc(18/16 * 100%) (或者 calc(112.5%))。 <strong>接下来，计算出 vw 值。</strong> 这部分的计算略繁琐:</p> <ol> <li>计算 font-size 的最大差值 v1(22-18=4)</li> <li>用 v1 除以视口宽度的最大差值 v2(1000-600)</li> <li>将上述结果再乘以 100vw – smaller-viewport-width(100vw – 600)</li> </ol> <p>最终，结果如下：</p> <pre> <code class="language-css">html { font-size: calc(112.5% + 4 / 400 * (100vw - 600px) ) } </code></pre> <p>开始接触可能会比较复杂，但是熟悉之后，你可以把它简化成 Sass 混入( <a href="/misc/goto?guid=4959673709480617615" rel="nofollow,noindex">simple sass mixin</a> )。</p> <h3>原文参照</h3> <p> </p> <p>来自： <a href="/misc/goto?guid=4959673709559391741" rel="nofollow">http://www.ido321.com/1675.html</a></p> <p> </p>