字体大小相对于用户的屏幕分辨率？
我有一个stream畅的网站，菜单是其宽度的20％。 我想要正确测量菜单的字体大小，所以它总是适合框的宽度，而不会换行到下一行。 我正在考虑使用“em”作为单位，但它是相对于浏览器的字体大小，所以当我改变分辨率的字体大小保持不变。
也尝试了百分比和百分比。 没有任何工作，因为我需要它…
请给我一个如何进行的暗示。
@media screen and (max-device-width : 320px) { body or yourdiv element { font:<size>px/em/cm; } } @media screen and (max-device-width : 1204px) { body or yourdiv element { font:<size>px/em/cm; } } 你可以根据屏幕大小手动给它。只要看看不同的屏幕大小，手动添加字体大小。
你可以使用em ， % ， px 。 但结合media-queries 请参阅此链接了解媒体查询。 此外，相对于当前的视口尺寸，CSS3有一些新的尺寸大小的值： vw ， vh和vmin 。 看到有关的链接 。
我开发了一个很好的JS解决scheme – 适用于完全响应的HTML（即用百分比构build的HTML）
-
我只使用“em”来定义字体大小。
-
HTML字体大小设置为10像素：
html { font-size: 100%; font-size: 62.5%; } -
我在调用文档时调用了字体大小调整function：
//这需要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+'%'); }
有几种方法来实现这一点
使用媒体查询，但需要几个断点的字体大小
body { font-size: 22px; } h1 { font-size:44px; } @media (min-width: 768) { body { font-size: 17px; } h1 { font-size:24px; } }
使用％或em的尺寸。 只要改变基础字体大小，一切都会改变。 与以前的不同，您可以每次更改正文字体而不是h1，或者将字体大小设置为设备的默认字体，并全部放在em
- “Ems”（em） ：“em”是一个可扩展的单位。 em等于当前字体大小，例如，如果文档的font-size是12pt，则1em等于12pt。 Ems在本质上是可扩展的，所以2em等于24pt，.5em等于6pt等。
- 百分比（％） ：百分比单位非常像“em”单位，除了一些基本的差异。 首先，当前字体大小等于100％（即12pt = 100％）。 在使用百分比单位的同时，您的文字仍可完全扩展至移动设备和辅助function。
见kyleschaeffer.com / ….
CSS3支持与视图端口相关的新维度。 但是这在android中不起作用
- 3.2vw =视口宽度的3.2％
- 3.2vh =视口高度的3.2％
- 3.2vmin = 3.2vw或3.2vh更小
-
3.2vmax = 3.2vw或3.2vh更大
body { font-size: 3.2vw; }
看到css-tricks.com / ….也看看caniuse.com / ….
你可以试试这个工具： http : //fittextjs.com/
我没有使用这个第二个工具，但它看起来类似： https ： //github.com/zachleat/BigText
不知道为什么这很复杂。 我会做这个基本的JavaScript
<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>
12表示12像素1280分辨率。 你在这里决定你想要的价值
我已经创build了https://stackoverflow.com/a/17845473/189411的变体;
在那里你可以设置最小和最大文本大小的关系，你想要“检查”大小的框的最小和最大大小。 另外，您可以检查dom元素的大小，而不是您要应用文本大小的框。
基于＃size-2元素的500px和960px宽度，在＃size-2元素上调整19px和25px之间的文本
resizeTextInRange(500,960,19,25,'#size-2');
您可以在＃size-1元素上根据主体元素的500px和960px宽度调整13px和20px之间的文本大小
resizeTextInRange(500,960,13,20,'#size-1','body');
function inRange (x,min,max) { return Math.min(Math.max(x, min), max); } function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) { if(elementCheck==0){elementCheck=elementApply;} var ww = $(elementCheck).width(); var difW = maxW-minW; var difT = textMaxS- textMinS; var rapW = (ww-minW); var out=(difT/100)*(rapW/(difW/100))+textMinS; var normalizedOut = inRange(out, textMinS, textMaxS); $(elementApply).css('font-size',normalizedOut+'px'); console.log(normalizedOut); } $(function () { resizeTextInRange(500,960,19,25,'#size-2'); resizeTextInRange(500,960,13,20,'#size-1','body'); $(window).resize(function () { resizeTextInRange(500,960,19,25,'#size-2'); resizeTextInRange(500,960,13,20,'#size-1','body'); }); });
