我很难理解字体缩放.
我目前有这个网站的身体font-size100%.但是100%的是什么？这似乎计算在16px.
我的印象是,100%会以某种方式引用浏览器窗口的大小,但显然不是因为它总是16px,无论窗口是否调整为移动宽度或完整的宽屏桌面.
如何使我的网站上的文本与其容器相关？我尝试过使用,em但这也没有扩展.
我的理由是,事情就像我的菜单中就当调整压扁,所以我需要减少PX px的font-size相对其它元素的容器的宽度之中.(例如,在大型桌面上的菜单中,22px可以完美运行.向下移动到平板电脑宽度,16px更合适.)
我知道我可以添加断点,但我真的希望文本可以扩展为具有额外的断点,否则我将最终为每100px宽度减少数百个断点来控制文本.
已经提出了类似的问题,但解决方案确实与我想要做的事情相吻合.基本上,我有一篇标题(<h1>)的文章.我不想控制标题的长度,但我也不希望标题出现在多行上.有没有办法用css或jQuery根据<div>标签的宽度调整文本大小？
我知道如果我能检测到文本与边缘的重叠,我会用伪代码做什么<div>:
var fontize = $("#title").css("font-size");
var i = /*remove unit from integer*/
while( /*text overlaps div*/ ){
$("#title").css("font-size", --i+"pt");
}
如果有一个CSS属性我可以设置更好,但我似乎找不到一个(溢出在这种情况下不起作用).
我知道我可以调整字体大小,但是我希望它在不同平台上查看时自动缩小以适应div,例如,不同平台读取字体大小.
看小提琴:http://jsfiddle.net/08pyzgx4/
<body>
<div style="width:600px; height:58px; max-width: 600px; background-image:url(http://itrace.co.za/images/emailfiles/banner.png); background-repeat:no-repeat; display:block; max-width: 600px; font-family:Arial, Helvetica, sans-serif; font-size:19px; color:#000; text-align:center; padding-top:12px;"><b>Bla Bla Bla Bla Bla Bla </b>
<div style="height:16px; max-height:16px; padding-left:88px; padding-right:88px; margin-top:18px; font-size:0.6em; letter-spacing:-0.02em; position:relative;"><strong>Website: </strong>www.blabla.co.za | <strong>E-mail: </strong>info@blabla.co.za | <strong>Control Centre: </strong>08600-22-blabla</div>
</div>
</body>
我正在尝试使用中间的旋转图标进行加载叠加效果.我用fontawesome.所以我编写了这个:http://jsfiddle.net/eys3d/7/
它有效,但我正在尝试使其响应.我的意思是,当截面尺寸减小时,旋转尺寸也会减小(保持居中).如果部分的大小增加,则为对位.
我试图使用em单位,但我没有得到我预期的结果.
这是最好的方法吗？我如何才能使其响应？
CSS
section {
width: 200px;
height: 200px;
margin: 50px;
}
#overlay {
position: relative;
width: 100%;
height: 100%;
z-index: 99999999999;
background: rgba(0, 0, 0, 0.5);
}
#overlay i {
position: absolute;
top: 50%;
left: 50%;
}
.spin-big {
font-size: 50px;
height: 50px;
width: 50px;
margin-top: -25px;
margin-left: -25px;
}
.spin-normal {
font-size: 35px;
height: 35px;
width: 35px;
margin-top: -22.5px;
margin-left: -22.5px;
}
.spin-small {
font-size: 20px;
height: 20px;
width: …