1.使用视窗单位进行排版
这里还有一个为什么要考虑使用视窗单位进行排版的原因 - 根据客户端的浏览器，视窗单位会自动重新计算。这就意味着我们不需要显式声明媒体查询的字体大小
实例1：让我们用一个例子清楚地说明这一点
考虑下面的代码，我在800px处将font-size的大小由16px 更改为 20px
当你看着这段代码时，你可以在800px视窗时，立马告诉font-size将大小由16px更改为20px。这是我们为了良好的视觉效果经常做的事情
但是，偶尔你也会遇到这种情况，在两个断点处你不得不额外增加一个媒体查询以便在不同的设备上，排版依旧保持良好
但是不指定多个媒体查询或者多个字体大小，你如何在不同情况下拥有相同效果呢?
这时候视窗单位就要发挥它的作用了，在视窗单位中设置font-size属性，你就可以很容易的获取一样的效果
不过，正如你可以看到的，视窗单位太适应屏幕大小的改变。如果你也将字体大小设置为3vw,在一个屏幕宽度为320px的设备(移动)上，你得到的文本大小将为10px。这时字体过小而不适合阅读。另一方面，在一个屏幕宽度为1440px的设备(笔记本电脑)上，你得到的字体大小将为43px，这时，字体又太大了
值得庆幸的是，这里有一个简单的方法可以实现。我们可以设置一个最小的字体大小，然后在一个小视窗中通过多次使用calc()属性缩放字体
2.calc的问题
我尝试做的第一件事就是创建一个字体大小为 body 文本大小两倍的<h1>元素。结果证实并不可以直接这么做，请看下面的实例
比方说你现在的视窗大小为800px。默认的font-size大小为16px
- 在
<html>中112.5%计算出的font-size大小为18px(112.5/100 * 16px) - 0.25vw计算出的值相等于2px(800px * 0.25 ÷ 100)\
<html>中计算的font-size大小为20px (18px + 2px)
到目前为止HTML计算是不是很好？太棒了！
我们将采用同样的方式来解决<h1>的计算。这一次要特别注意112.5%的计算
<h1>中112.5%计算出来相当于22.5px的font-size大小(112.5/100 * 20px)- 0.25vw相当于2px(800px * 0.25 ÷ 100)
<h1>的font-size大小为49px((22.5px + 2px) * 2)
不幸的是，我们要寻找的正确的
大小为body的font-size大小的两倍或者说是40px，所以该怎么办呢？？
3.精度公式解决问题
有什么办法可以结合calc实现具体的功能呢？
还有一个更大的我不得不克服的问题。就是我之前曾经提出的一个疑问:”在视窗大小为800px的情况下你如何计算vw，使排版的单位大小为20px？”
让我们说说你想要的结果…
- 当视窗大小为600px时，font-size大小为18px
- 当视窗大小为1000px时，font-size大小为22px
1502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
