CODEWITHSUNDEEP
htmlcssfonts
user2804038
user2804038

Reputation: 1153

How to make the font size smaller when I resize the browser

I am making a website with html5 and css. I am trying to make this website responsive, but I don't know why the size of the font stay the same when I resize the browser window, even when I'm using em or percentages such as: font-size: XXem or font-size: XX%.

How can I make font resizable?

Upvotes: 29

Views: 97211

Answers (9)

karuhanga
karuhanga

Reputation: 3322

This might help. Responsively adjusts the text size, according to the window size, but keeps it just large enough for mobile compatibility http://typecast.com/blog/a-more-modern-scale-for-web-typography

Upvotes: 1

user4565320
user4565320

Reputation: 71

font-size: 25vmin;

This was very good resizing font in both height and width.
You dont need anything in the head.

Upvotes: 1

Victor3y
Victor3y

Reputation: 886

For HTML5 web pages I would highly suggest using Viewpoint Width/Height values. They function similarly to % but are font sizes that resize with the window.

For example...

.some-paragraph{
    font-size: 5vw;
}

This would set the font-size to always be 5% of the current viewport width, even on re-sizing!

Learn more here: http://www.w3.org/TR/css3-values/#viewport-relative-lengths

Note: You may need to have this in your head:

 <meta name="viewport" content="initial-scale=1">

Upvotes: 64

Reynderke
Reynderke

Reputation: 36

you can fix this by using @media query's and a viewport in your css , and add this meta tag to your html:

 <meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>

and with the @media query's and viewport you declare what size you have per screen width using this media query + viewport in css:

 @media screen and (min-width: 820px) and (max-width: 920px) {
  @viewport { width: 820px; }   

            // your css for screens between 820 and 920 pixels in width goes here

  }

i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, @media screen and (min-width: 1200px){ @viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}

So this means you will have 6 times your css code which is adapted will be adapted to the size.

This is called adaptive or responsive design and is pretty easy to do

For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Upvotes: 1

Space Age Crystal
Space Age Crystal

Reputation: 404

You should definitely use CSS media queries to style based on a range of screen ratios and specifications, but here's an example using both rem units and jQuery to make the font smaller when you resize the browser width. Fiddle here.

CSS

html { font-size: 90.5%; }
body { font-size: 1.4rem;}
h1 { font-size: 2.4rem; }

JavaScript/jQuery

$(document).ready(function () {
    var holdWidth = $(window).width();
    $(window).on('resize', function () {
        newPercentage = (($(window).width() / holdWidth) * 100) + "%";
        $("html").css("font-size", newPercentage)
    });
});

and here's an example averaging both the width and height for the new font size percentage:

$(document).ready(function () {
    var holdWidth = $(window).width();
    var holdHeight = $(window).height();
    var holdAverageSize = (holdWidth + holdHeight) / 2;
    $(window).on('resize', function () {
        newAverageSize = ($(window).width() + $(window).height()) / 2;
        newPercentage = ((newAverageSize / holdAverageSize) * 100) + "%";
        $("html").css("font-size", newPercentage)
        console.log(newPercentage);
    });
});

Upvotes: 3

user3024320
user3024320

Reputation: 

.text {
    font-size: 50px;
}


@media only screen 
and (min-width : 300px)
and (max-width : 500px) {

   .text {
    font-size: 20px;
   }

}

    @media only screen 
    and (min-width : 500px)
    and (max-width : 800px) {

       .text {
        font-size: 30px;
       }

    }

</style>


<div class="text">Test Text</div>

Upvotes: 1

steve
steve

Reputation: 2519

How are you specifying your baseline font-size (against your html or body tags in your CSS file)? If you're setting this value to a pixel (or other fixed measure) or inheriting a browser default font size your percentage or em values will always be a percentage of these defaults.

The most common approach to building responsive sites is to do a 'mobile first' approach whereby your default style sheet handles the base styling for your site on a small screen, then use media queries in CSS to tweak the styles as screen size increases. Are you using any media queries/breakpoints currently?

Upvotes: 0

San
San

Reputation: 1247

It's called Responsive

@media screen and (max-width: 1024px) {
your font  style goes here

}

@media screen and (max-width: 950px) {
 your font  style goes here

}


@media screen and (max-width: 650px) {
 your font  style goes here


}

@media screen and (max-width: 480px) {
 your font  style goes here

}

Upvotes: 12

fauverism
fauverism

Reputation: 1992

Check your media queries, they should be controlling your font size, if you're using responsive techniques.

A code sample would help.

Give rem a shot. Works better than % or em.

http://snook.ca/archives/html_and_css/font-size-with-rem

Upvotes: 3

Related Questions