html – CSS字体大小(响应),相对于设备分辨率?
假设我们有以下test.htm:
<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)? 解决方法
我刚刚编写了一个关于如何使用纯HTML / CSS实现此目的的小教程/示例:
响应单位(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相乘,之后我们添加两个值来建立字体大小. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 微信小程序 scroll-view隐藏滚动条详解
- jquery中的ajax方法怎样通过JSONP进行远程调用
- 轻芒杂志小程序怎么样,轻芒小程序+的内容运营模式 ...
- jquery实现初次打开有动画效果的网页TAB切换代码
- 微信小程序设置http请求的步骤详解
- “dart:html”和“dart:dom”包之间有什么区别?
- 在Sublime Text 2中为HTML标记添加id =“”和class =“”的
- html – div contentEditable但Readonly
- 语法高亮 – 如何在Sublime Text中添加功能到语法定义而不进
- macos – OSX上的Sublime Text:拼写检查器不学习