我知道这可以通过Javascript轻松解决,但我只对纯CSS解决方案感兴趣.
我想要一种动态调整文本大小的方法,以便它始终适合固定的div.以下是示例标记:
<div style="width: 200px; height: 1em; overflow: hidden;">
<p>Some sample dynamic amount of text here</p>
</div>我想也许这可以通过在ems中指定容器的宽度,并使字体大小继承该值来实现？
DMT*_*ner 484
我刚刚发现这可以使用大众单位.它们是与设置视口宽度相关联的单位.有一些缺点,例如缺乏传统的浏览器支持,但这绝对值得认真考虑使用.另外,您仍然可以为旧浏览器提供后备服务,例如:
p {
font-size: 30px;
font-size: 3.5vw;
}
http://css-tricks.com/viewport-sized-typography/ 和 https://medium.com/design-ux/66bddb327bb1
aWe*_*per 105
CSS3支持相对于视口的新维度.但这在android <4.4中不起作用
3.2vmax = 3.2vw或3.2vh的较大值
body
{
font-size: 3.2vw;
}
看css-tricks.com/....还看看caniuse.com/....
要么
使用媒体查询.最简单的方法是使用%或em中的维度.只需更改基本字体大小,一切都会改变.
@media (max-width: @screen-xs) {
body{font-size: 10px;}
}
@media (max-width: @screen-sm) {
body{font-size: 14px;}
}
h5{
font-size: 1.4em;
}
使用%或em中的维度.只需更改基本字体大小,一切都会改变.在上一个中,您可以只更改正文字体而不是每次更改h1,或者让基本字体大小为设备的默认值,并将其全部放在em中
有关em,px和%的更多信息,请参阅kyleschaeffer.com/....
Kho*_*Phi 28
您可能对此方法感兴趣calc:
font-size: calc(4vw + 4vh + 2vmin);
完成.调整值直到符合您的口味.
资料来源:https://codepen.io/CrocoDillon/pen/fBJxu
Sve*_*jek 12
唯一的方法可能是为不同的屏幕尺寸设置不同的宽度,但这种方法非常简单,你应该使用js解决方案.
h1 {
font-size: 20px;
}
@media all and (max-device-width: 720px){
h1 {
font-size: 18px;
}
}
@media all and (max-device-width: 640px){
h1 {
font-size: 16px;
}
}
@media all and (max-device-width: 320px){
h1 {
font-size: 12px;
}
}
use*_*058 12
我知道我正在重新解决一个长期存在的问题,但我有同样的问题,我想补充一些东西.请不要因为这个而禁止我,我觉得重要的是要证明这个答案,我会在必要时删除.@Joseph Silber错了,编码所有可能性实际上是一种可行的方法来做到这一点.原因是因为实际上没有无限的可能性.嗯,技术上有,但99%的访问者将使用标准分辨率.这对于移动设备来说是双重的(响应式网页设计的主要原因),因为大多数移动操作系统全屏运行应用程序,没有窗口大小调整.
此外,由于滚动条的高度几乎无关紧要(到一定程度,我会立即留下一个超过4或5英尺长的网页,但这大部分都是正确的),所以你只需要担心宽度.实际上,您需要编码的唯一宽度如下:240,320,480(对于较旧的iThings),640,800,1024,1280,1440,1600,1920,2048,2560.甚至不打扰4k,它会使你的图像膨胀太多,2560尺寸拉伸到100%宽度在4k显示器上看起来很好(我已经测试了这个).另外,不要像上一张海报建议的那样打扰720(720x480).它的分辨率几乎完全由数码相机使用,即便如此,它也非常罕见.
如果有人使用异国情调的分辨率,那么过去15年中制作的几乎所有渲染器都会向下舍入,所以如果有人的屏幕宽度是,那么.1100,它将加载1024 CSS规则,您的网站不应该破坏.这通过尝试创建不必要的响应规则来呈现异常分辨率,并且您需要逐个像素地为每个可能的设置进行编码的想法是荒谬的,除非有人使用网络浏览器如此过时以至于您的网站可能无法加载无论如何.
作为参考，一个非CSS解决方案：
下面是一些JS，它根据容器内的文本长度来调整字体大小。
Codepen的代码略有修改，但思路如下：
function scaleFontSize(element) {
var container = document.getElementById(element);
// We only want to scale down long text, so first we reset
// font-size to 100%, in case this function is called multiple times.
container.style.fontSize = "100%";
// Now actually check if the text is wider than
// its container, if so then reduce font-size
if (container.scrollWidth > container.clientWidth) {
container.style.fontSize = "70%";
}
}
对我来说，当用户在下拉菜单中进行选择时，我会调用此函数，然后填充菜单中的div（这是发生动态文本的位置）。
scaleFontSize("my_container_div");
此外，我还使用CSS省略号（“ ...”）截断甚至更长的文本，如下所示：
#my_container_div {
width: 200px; /* width required for text-overflow to work */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
因此，最终：
短文字：例如“ APPLES”
充分呈现，漂亮的大字母。
长文本：例如“苹果和橘子”
通过上述JS缩放功能将其缩小70％。
超长文字：例如“苹果，橙子和香蕉...”
通过上面的JS缩放功能和CSS规则，将比例缩小70％，并用“ ...”省略号截断。
您还可以探索使用CSS字母间距来缩小文本，同时保持相同的字体大小。
calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));
使用这个等式。
对于大于或小于 1440 和 768 的任何值，您可以给它一个静态值，或应用相同的方法。
vw 解决方案的缺点是你不能设置缩放比例，比如屏幕分辨率 1440 下的 5vw 可能最终是 60px 字体大小，你的想法字体大小，但是当你将窗口宽度缩小到 768 时，它可能会结束是 12px，不是你想要的最小尺寸。使用这种方法，您可以设置上边界和下边界，字体将在两者之间自行缩放。