font-size
相对于页面的大小?将百分比作为单位应用是指参考标准字体大小(如12px的90%,而不是页面的90%!)。这与大多数其他标签的行为不同。有什么办法可以让页面和字体“放大和缩小”?我应该依赖
em
吗?谢谢
查看新的vh和vw CSS单位。 浏览器支持还不是很好。
http://snook.ca/archives/html_and_css/vm-vh-units
最近它已经出现在WebKit中: https://bugs.webkit.org/show_bug.cgi?id=27160
在支持的浏览器中,1 vh
是视口高度的1%(1/100),而1 vw
是视口宽度的1%(1/100)。 还有 vmin
和 vmax
单位,分别表示两者中较小和较大的单位。
不,你不能以与页面大小相对的百分比设置字体大小。
使用 em
进行大小调整是基于字体在 16 点大小下的正常渲染大小来计算的。
如果您希望页面能够缩放并保持某种比例,包括框和字体,则使用 em
进行设置就可以了。
这种方法将允许页面上的字体和框等按照相对大小进行缩放,希望不会出现超出边界和边框的情况。
function setFontSize() {
pagesized = window.innerWidth / 30; // Proportionate font size to page
pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
pagesized = Math.min(pagesized, 30); // & No greater than 30 px
document.body.style.fontSize = pagesized; // Set body default font size
}
<body onresize="setFontSize()" onload="setFontSize()">
接下来你只需使用基于百分比或em单位的CSS(或内联格式),所有内容都会在这些限制范围内良好缩放。
或者,使用JQuery,你可以这样做:
$(window).resize(function() {
pagesized = $(window).innerWidth() / 30; // Proportionate font size to page
pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
pagesized = Math.min(pagesized, 30); // & No greater than 30 px
$('body').css('font-size', pagesized); // Set body default font size
});
h1 { font-size: 22px; color: orange; }
@media only screen and (max-width: 900px) {
h1 { font-size: 20px; color: blue; }
}
@media only screen and (max-width: 800px) {
h1 { font-size: 18px; color: green; }
}
@media only screen and (max-width: 700px) {
h1 { font-size: 12px; color: red; }
}
1em
可用于设置与父元素相关的字体大小。因此,如果您将body的字体大小设置为与页面大小成比例的值,则在body下使用“em”作为单位的所有字体都将与页面成比例。height: 100%
或者width(如果您想将大小与宽度相关联)。我知道这个问题已经有人回答过了,但是为了以后的初学者
着想,我需要分享一下,因为我花费了一些宝贵的时间来解决它。
所以正如@random先生所说:使用em
作为单位就可以解决问题。
如果你希望页面可以缩放并保持一定比例的盒子和字体大小,那么使用em进行设置是不错的选择。
这种方法允许页面上的字体和盒子相对大小扩展,并希望没有东西会超出边界和边框。
将body
初始化为1em
,意味着100%
的font-size
。
body {
font-size: 1em;
}
font-size
设置为其父元素的百分比。.your_element {
font-size:0.4em /* for example 40% if its parent font-size */
}
现在是关于@media
查询的魔法
@media all and (max-width: 767px) {
body {
font-size: 0.4em !important;
}
}
@media all and (min-width: 768px) and (max-width: 1023px) {
body {
font-size: 0.6em !important;
}
}
@media all and (min-width: 1024px) and (max-width: 1199px) {
body {
font-size: 0.8em !important;
}
}
@media all and (min-width: 1200px) and (max-width: 1599px) {
body {
font-size: 1em !important;
}
}
@media all and (min-width: 1600px) and (max-width: 1999px) {
body {
font-size: 1.2em !important;
}
}
@media all and (min-width: 2000px) and (max-width: 2999px) {
body {
font-size: 1.6em !important;
}
}
@media all and (min-width: 3000px) and (max-width: 3999px) {
body {
font-size: 1.8em !important;
}
}
@media all and (min-width: 4000px) {
body {
font-size: 2em !important;
}
}
好了,祝你有美好的一天。
jQuery(document).ready(function ($) {
// Dynamisches Skalieren von Schriften
fontSize = function(){
//ww = $(window).innerWidth();
ww = $('.mainhead').innerWidth(); // Width of the Motherelement
one = ww/100; // 1%
multiplcator = one*31;
$('.mainhead').css({'font-size': multiplcator+'px'});
}
fontSize();
$(window).resize(function() {
fontSize();
});
});
当您现在通过CSS设置字体大小时,它可以在所有浏览器上完美运行。
.mainhead{
width:48%;
font: normal 2em Times, Verdana, sans-serif;
}