大佬教程收集整理的这篇文章主要介绍了html – CSS字体大小(响应),相对于设备分辨率？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> .testdiv,.testdivB,.testdivC { width: 50%; height: 30%; margin: 6px; border: 2px solid gray; font-size: 4em; } .testdivB { font-size: 12px; } .testdivC { font-size: 30pt; } </style> </head> <body> <div class="testdiv">Test one wriTing</div> <div class="testdivB">Test another wriTing</div> <div class="testdivC">Test three wriTing</div> </body> </html>
我已经尝试使用开发人员工具在Chromium中对此进行测试,这允许我模拟不同的设备;这里：
* Apple iPhone 4 : device resolution 320 x 480,a/r 0.666667 * Google Nexus 10 : device resolution 800 x 1280,a/r 0.625 * Amazon Kindle Fire HDX: device resolution 1600 x 2560,a/r 0.625
结果如下：
在这个例子中,所有设备都是纵向的,并且具有“几乎”相同的宽高比(~0.6),即使它们具有截然不同的分辨率.
因此,在前两种情况下,我得到的字体大小大致相对于设备屏幕大小,这是我想要实现的(尽管我很困惑,testdivB也显示为几乎相同)大小,当它应该更小) – 所以这一切都很好.
但是,在第三个例子中,在具有最大分辨率的设备上,testdivB不出所料(因为它在px中定义)相对于设备屏幕尺寸要小得多; testdivA也不是很令人惊讶,因为em与浏览器的“计算字体大小”相关 – 如果我没记错的话,那个也用像素表示.
但是,我认为pt会考虑设备屏幕分辨率,但它看起来不是：
http://www.w3.org/Style/Examples/007/units.en.html
好吧,我有什么选择,在所有三种情况下实现大致相同的字体大小(相对于设备屏幕大小)：
>如果我不想使用JavaScript(只有HTML CSS)？
>如果我确实想使用JavaScript(我猜有一种方法可以查询设备屏幕 – 而不是视口 – 分辨率,但我不确定是否确实存在)？
响应单位(vmin / vmaX)
#small { font-size: calc(1em + 1vmin); } #medium { font-size: calc(1em + 2vmin); } #large { font-size: calc(1em + 3vmin); }
<div id="small">small text</div> <div id="medium">Medium text</div> <div id="large">Large text</div>
规则vmin在您的上下文中非常有用.它需要vmin：屏幕最小边的1/100.无论方向如何.将它与calc()中的基本1em相结合,为我们提供了一种在字体大小上应用小型自定义响应方面的好方法.
替代方法(vw / vh)
#small { font-size: calc(1em + 1vw); } #medium { font-size: calc(1em + 2vw); } #large { font-size: calc(1em + 3vw); }
<div id="small">small text</div> <div id="medium">Medium text</div> <div id="large">Large text</div>
如果您希望对实际纵横比应用更多控制,我建议使用vw超过vmin.视口宽度(vw)占视口宽度的1/100.
基于视口宽高比(vmin和vmaX)的响应单位：
#test1 { font-size: calc((.4em + 1vmin) + (.4em + 1vmaX)); } #test2 { font-size: calc((.4em + 2vmin) + (.4em + 2vmaX)); } #test3 { font-size: calc((.4em + 3vmin) + (.4em + 3vmaX)); }
<div id="test1">small text</div> <div id="test2">Medium text</div> <div id="test3">Large text</div>
我对这个解决方案非常满意,这种方式允许我们同时考虑视口宽度和长度.我们将基本字体大小分为两个(在这种情况下为.4em)并将其与1vmin和1vmax相乘,之后我们添加两个值来建立字体大小.
以上是大佬教程为你收集整理的html – CSS字体大小(响应),相对于设备分辨率？全部内容，希望文章能够帮你解决html – CSS字体大小(响应),相对于设备分辨率？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。