Примечание: Это не просто решение html / css. Я не думаю, что это возможно сделать только с html и css, поэтому он интенсивно использует javascript. Также я использую jquery для этого, но он может быть легко воспроизведен любой из библиотек javascript. (Я использую библиотеку javascript в основном по двум причинам: во-первых, это кросс-браузерная совместимость, которую обеспечивают эти библиотеки, а также хорошо продуманные функции быстрого доступа / утилиты, и во-вторых, это большое количество плагинов, которые есть у этих библиотек. чтобы справиться с большинством ситуаций или принести на сайт бесплатные сладости)
Привет, я не нашел никакого готового решения для этого, но это то, что мне всегда нравилось в разработке для iphone, и что мне не хватало в веб-разработке, поэтому я решил попробовать его
Вот мое решение, оно не идеальное, но оно вроде работает: с. Я бы сказал, что это будет не слишком сложно, но я занял у меня некоторое время, в любом случае, думаю, что смогу использовать это когда-нибудь ... или какие-то знания, которые я приобрел в процессе ...
У него есть вдохновение из этого вопроса , где они изображают решение, основанное на цикле, где они увеличивают / уменьшают размер текста, пока он не уместится. Но я не был удовлетворен циклом для изменения размера каждого текста, и я был уверен, что он может быть вычислен напрямую, а не методом пробной ошибки!
Он также имеет вдохновение от здесь для обработки изменения размера окна.
Теперь перестаньте общаться, вот код:
<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 пикселей в ширину, и я протестировал его только на safari, firefox, chrome на mac.
Небольшая хитрость в том, что я хотел, чтобы он работал с несколькими текстами, и поэтому цикл $(".sc_container").each, который запускается на всех объектах с классом css ".sc_container".
Последний трюк заключается в том, что я использую мощность единицы 'css' для css: например, '3em' означает 3-кратный исходный размер текста, поэтому здесь я могу использовать это для масштабирования от исходного размера текста до желаемого текста размер ... вот почему я сохраняю исходную ширину текста на самих объектах DOM: $sc[0].orig_width=$sc.width(); и повторно использую ее для вычислений при последующем изменении размера, в противном случае она была испорчена после многократного изменения размера.
Что вы, ребята, думаете об этом?