Примечание: это не чистое решение html/css. Я не думаю, что это возможно сделать только с html и css, поэтому он интенсивно использует javascript. Также я использую jquery для этого, но его можно легко воспроизвести с любой из библиотек javascript. (Я использую библиотеку javascript в основном по двум причинам: 1-я — это кросс-браузерная совместимость, которую обеспечивают эти библиотеки, а также надежные ярлыки / служебные функции, а 2-я причина — это большое количество плагинов, которые есть в этих библиотеках. справляться с большинством ситуаций или приносить бесплатное удовольствие на веб-сайты)
Привет, я не нашел готового решения для этого, но это то, что мне всегда нравилось в разработке для iphone и чего мне не хватало в веб-разработке, поэтому я решил попробовать
Вот мое решение, оно не идеально, но вроде работает: p. Я думаю, это было бы не слишком сложно, но мне потребовалось некоторое время, в любом случае, я думаю, что когда-нибудь смогу это использовать ... или некоторые знания, которые я приобрел в процессе ...
Он вдохновлен этим вопросом, где они изобразите решение, основанное на цикле, в котором они увеличивают/уменьшают размер текста до тех пор, пока он не уместится. Но меня не устраивал цикл для изменения размера каждого текста, и я был уверен, что его можно вычислить напрямую, а не методом проб и ошибок!
Он также вдохновлен здесь для обработки изменения размера окна.
Теперь прекратите болтать, вот код:
<script type="text/javascript">
var timer_is_on=0;
jQuery.event.add(window, "load", loadFrame);
jQuery.event.add(window, "resize", resizeFrame);
function loadFrame() {
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
$sc[0].orig_width=$sc.width();
//console.log("saving width : "+$sc[0].orig_width+" for "+$sc[0])
});
resizeFrame()
}
function resizeFrame()
{
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
var wc = $(this).width();
var scale = 0
if (wc > $sc[0].orig_width) {
scale = wc / $sc[0].orig_width;
} else {
scale = - $sc[0].orig_width / wc;
}
//console.log("applying scale : "+scale+" for "+$sc[0])
$sc.css("font-size",scale+"em")
});
}
</script>
</head>
<body>
<div id="container">
<div class="sc_container">
<div class='sc'>SOME SUPER TITLE !</div>
</div>
<div class="sc_container">
<div class='sc'>ANOTHER ONE !</div>
</div>
<div class="sc_container">
<div class='sc'>AND A THIRD LOOOOOOOOOOOOOONG ONE :) !</div>
</div>
<div> And some normal content</div>
</div>
А вот тестовая страница
Это не очень надежно ... оно плохо работает, когда окно шириной менее 400 пикселей, и я тестировал его только на сафари, firefox, chrome на mac.
Небольшая сложность заключается в том, что я хотел, чтобы он работал с несколькими текстами, поэтому цикл $(".sc_container").each выполняется для всех объектов с классом css «.sc_container».
Последний трюк заключается в том, что я использую силу модуля css 'em': например, '3em' означает в 3 раза больше исходного размера текста, поэтому здесь я могу использовать это для масштабирования от исходного размера текста до желаемого размера текста. вот почему я сохраняю исходную ширину текста в самих объектах DOM: $sc[0].orig_width=$sc.width(); и повторно использую ее для вычислений позже при изменении размера, иначе она испортилась после многократного изменения размера.
Что вы, ребята, думаете об этом?
person
dwarfy
schedule
24.04.2011
