Responsive text size using ems

StackOverflow https://stackoverflow.com/questions/17858866

Question

I am trying to learn some responsive webdesign techniques and trying to code my website in a responsive way. I don't want to use any frameworks yet. My problem is that div width in ems is different on mobile than on desktops. When viewing on a desktop, my h1 fits into a div and on mobile it does not. Shouldn't this be the same in both case? All sizes are in em.

Here is my HTML code:

<!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;
    }

Here is a live version: adamlakomy.pl. I appreciate all your help.

mobile version

Was it helpful?

Solution

The problem is that the text sizes are not re-sizing based on the window. Here is a great article to help you understand responsive re-sizing.

To fix this you have a few options.

The first is to use @media queries - you can even still use ems! Note: when using ems you should have a base em that all others (including width, height, and other font sizes) are based off of. You can then affect everything by changing that one font size. For example

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

This would make all the text you have half it's original size when the screen is smaller than 25em width

A second option would be to use javascript (this uses jQuery as well) to do it. I quickly pulled this example from this SO post, you can probably find or come up with a more eloquent solution if you want to use this method. Here is that example

$(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);
}

Or you could use a plugin which I don't recommend for paragraphs of text, but for your small amount they would work fine. Two of the most common ones are FitText and BigText

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top