温州做网站技术员,网站编辑工作,网站营销策划公司,企业网站模板下载尽在1.使用视窗单位进行排版
这里还有一个为什么要考虑使用视窗单位进行排版的原因 - 根据客户端的浏览器#xff0c;视窗单位会自动重新计算。这就意味着我们不需要显式声明媒体查询的字体大小
实例1#xff1a;让我们用一个例子清楚地说明这一点
考虑下面的代码#xff0c;…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
我们这里给出一个公式 首先确定最小的屏幕600px的时候对应16*1.12518px的字体然后600px对应18px字体—-1000px对应22px字体这就很明显改变100px屏幕宽度字体会改变1px所以很显然(100vw-600px)是结果多少px就对应改变百分之多少px的字体值所以可以最终得出结论100vw-600px/100的结果值就是所改变的那几个px的字体值再加上之前的18px基础值就可以了。
