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?

Answers


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">

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

}

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


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

.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>

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/


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


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?


font-size: 25vmin;

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


Need Your Help

Derive abstract class from non-abstract class

c# .net inheritance abstract

Is it OK to derive an abstract class from a non-abstract class or is there something wrong with this approach?