Отзывчивый размер текста с использованием ems

Я пытаюсь выучить некоторые отзывчивые методы веб-дизайна и попытаться скомпоновать свой веб-сайт. Я еще не хочу использовать какие-либо фреймворки. Моя проблема в том, что ширина div в ems отличается на мобильном телефоне, чем на рабочих столах. При просмотре на рабочем столе мой h1 вписывается в div, а на мобильном - нет. Разве это не должно быть одинаковым в обоих случаях? Все размеры указаны в em.Отзывчивый размер текста с использованием ems

Вот мой HTML код:

<!DOCTYPE html> 
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en" > <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>Sieć z pasją</title> 

    <link rel="stylesheet" href="css/style.css"> 

    <!-- Google webfonts --> 
    <!-- font-family: 'Expletus Sans', cursive; --> 
     <link href='http://fonts.googleapis.com/css?family=Expletus+Sans' rel='stylesheet' type='text/css'> 

</head> 
<body> 
    <div class="transparent-bg"> 
     <h1><span class="hello">Hello</span> 
     </br><span class="is">my name is</span> 
     </br><span class="adam">Adam</span></h1> 
    </div> 
</body> 
</html>

CSS:

body { 
    background:url('../img/background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
} 
.transparent-bg { 
    background-color:rgba(185,178,160,0.6); 
    padding:2em; 
    padding-top:5em; 
    max-width:30em; 
    position:relative; 
    left:4em; 
    top:5em; 
} 
h1 { 
    font-family: 'Expletus Sans', cursive; 
    color:black;  
    line-height:1em; 
} 
    span.hello { 
     font-size:4em; 
    } 
    span.is { 
     letter-spacing:0.4em; 
     position:relative; 
     left:0.3em; 
    } 
    span.adam { 
     font-size:3em; 
     letter-spacing:0.15em; 
     position:relative; 
     top:0.3em; 
    }

Вот живой версии: adamlakomy.pl. Я ценю вашу помощь.

mobile version

источник

2013-07-25 Glorifind

Вы пытались использовать запросы '' @ media' (http://css-tricks.com/css-media-queries/), чтобы изменить размер мобильного 'em' ? –

разве цель em не пропорциональна? Я obviusly не знаю, что это очень важно. – Glorifind

Я думаю, что часть вашей проблемы просто объясняется несовершенство понимания 'em'. Ознакомьтесь с [этой ссылкой] (http://www.impressivewebs.com/understanding-em-units-css/) для получения дополнительной информации. в теме. Что касается вашего проекта, это левое позиционирование текста, в котором вы хотите его видеть? Или это проблема позиционирования, а не размер шрифта? –

Проблема заключается в том, что размеры текста повторно не проклейки на основе окна. Here is a great article, чтобы помочь вам понять отзывчивое изменение размера.

Чтобы исправить это, у вас есть несколько вариантов.

Первый должен использовать @media запросов - вы все еще можете использовать em s! Примечание: при использовании em s у вас должно быть основание em, что все остальные (включая ширину, высоту и другие размеры шрифта) основаны на. Затем вы можете повлиять на все, изменив этот размер шрифта. Например

media all and (max-width: 25em) { 
    html { 
    font-size:50%; 
    } 
}

Это сделало бы весь текст у вас есть половину исходного размера, когда экран меньше, чем 25em ширина

Второй вариант будет использовать JavaScript (это использует JQuery, а), чтобы сделать Это. Я быстро вытащил этот пример из this SO post, вы можете найти или придумать более красноречивое решение, если вы хотите использовать этот метод. Вот этот пример

$(function() { 
    $(window).bind('resize', function() 
    { 
     resizeMe(); 
     }).trigger('resize'); 
}); 
function resizeMe() { 
    //Standard height, for which the body font size is correct 
    var preferredHeight = 768; 

    var displayHeight = $(window).height(); 
    var percentage = displayHeight/preferredHeight; 
    var newFontSize = Math.floor(/*default font size*/ * percentage) - 1; 
    $("body").css("font-size", newFontSize); 
}

Или вы можете использовать плагин, который я не рекомендую для абзацев текста, но для небольшого количества они будут работать нормально. Два из наиболее распространенных: FitText и BigText

источник

2013-07-26 13:16:45

Спасибо за помощь. Простите за поздний ответ. – Glorifind

Отзывчивый размер текста с использованием ems

ответ

Смежные вопросы