When The Browser Changes Size 'squeezes' Making The Text Size Lower

All i would like to know is it possible to make text size decrease as i make the browsers size change? The reason for me doing this is that i am creating a menu bar in pure CSS an

Solution 1:

You need to set up media queries.

Media Queries let you define CSS rules based on the way the page is being rendered. So lets say your page breaks when the window is smaller than 1024px.

.myClass { 

    //Default rules for .myClassfont-size:18px;
  }

@media (max-width: 1024px) { 
    // The rules in here only apply if the window is less than/equal to 1024px// So we'll drop the font size so that it fits the smaller screen.myClass {
    font-size:12px;
  }
}

I made a JSFiddle here. The media query bases the width off the width of the "Result" frame, so slide that around to make it wider/narrower to see how it works.

Solution 2:

Its always recommended to use % for container.You no need to put more effort on this, just apply % instead of px. Example :-

<divstyle="widht:100%;height:40%;"><div><fontsize="20px">Hi Mate</font></div><div><fontsize="20px">How are you</font></div></div>

Here the outer <div> is the container ,which should be in % . Its working for me, I have designed more than 5 web site. The text size will automatically change with respective browser .

Hope it will help you.