我有一个流畅的网站,菜单宽度的20%.我希望正确测量菜单的字体大小,因此它总是适合盒子的宽度,永远不会换行到下一行.我正在考虑使用"em"作为一个单元,但它与浏览器的字体大小有关,因此当我更改分辨率时,字体大小保持不变.
尝试了pts和百分比.因为我需要它没有任何作用......
请给我一些如何继续的提示.
Mil*_*vić 50
您可以使用em,%,px.但与media-queries See this Link结合使用可了解媒体查询.此外,CSS3具有相对于当前视口尺寸大小的东西了一些新的价值观:vw,vh,和vmin.请参阅相关链接.
Arp*_*ava 49
@media screen and (max-width : 320px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
@media screen and (max-width : 1204px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
您可以根据屏幕的屏幕大小手动给它.只需看一下不同的屏幕尺寸并手动添加字体大小.
aWe*_*per 21
有几种方法可以实现这一目标
使用媒体查询但需要多个断点的字体大小
body
{
font-size: 22px;
}
h1
{
font-size:44px;
}
@media (min-width: 768)
{
body
{
font-size: 17px;
}
h1
{
font-size:24px;
}
}
使用%或em中的维度.只需更改基本字体大小,一切都会改变.与之前的版本不同,您可以随时更改正文字体而不是h1,或者将基本字体大小设置为默认设备并将其全部放在em中
CSS3支持相对于视口的新维度.但这在android中不起作用
3.2vmax = 3.2vw或3.2vh的较大值
body
{
font-size: 3.2vw;
}
看css-tricks.com/....还看看caniuse.com/....
小智 18
我开发了一个很好的JS解决方案 - 适用于完全响应的HTML(即用百分比构建的HTML)
我只使用"em"来定义字体大小.
html字体大小设置为10像素:
html {
font-size: 100%;
font-size: 62.5%;
}
我在文档就绪时调用字体大小调整功能:
//这需要JQuery
function doResize() {
// FONT SIZE
var ww = $('body').width();
var maxW = [your design max-width here];
ww = Math.min(ww, maxW);
var fw = ww*(10/maxW);
var fpc = fw*100/16;
var fpc = Math.round(fpc*100)/100;
$('html').css('font-size',fpc+'%');
}
Ita*_*oam 14
不使用媒体查询很好，因为它允许逐渐缩放字体大小。
使用vw单位将调整相对于视口大小的字体大小。
直接将vw单位转换为字体大小将很难达到移动分辨率和桌面分辨率的最佳点。
我建议尝试类似的方法：
body {
font-size: calc(.5em + 1vw);
}Almost before we knew it, we had left the ground.信用：CSS 深入
小智 7
不知道为什么这很复杂。我会做这个基本的javascript
<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>
其中 12 表示 1280 分辨率下的 12px。你在这里决定你想要的值