Font scaling based on width of container
If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.
If the container is the body, what you are looking for is Viewport-percentage lengths:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.
The values are:
vw
(% of the viewport width)vh
(% of the viewport height)vi
(1% of the viewport size in the direction of the root element's inline axis)vb
(1% of the viewport size in the direction of the root element's block axis)vmin
(the smaller ofvw
orvh
)vmax
(the larger orvw
orvh
)
1 v* is equal to 1% of the initial containing block.
Using it looks like this:
p {
font-size: 4vw;
}
As you can see, when the viewport width increases, so do the font-size
, without needing to use media queries.
These values are a sizing unit, just like px
or em
, so they can be used to size other elements as well, such as width, margin, or padding.
Browser support is pretty good, but you'll likely need a fallback, such as:
p {
font-size: 16px;
font-size: 4vw;
}
Check out the support statistics: http://caniuse.com/#feat=viewport-units.
Also, check out CSS-Tricks for a broader look: Viewport Sized Typography
Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography
And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu
Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS
Font size relative to the user's screen resolution?
@media screen and (max-width : 320px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
@media screen and (max-width : 1204px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
You can give it manually according to screen size of screen.Just have a look of different screen size and add manually the font size.
Change font size on window width resize and change document height when font size changes
$(window).resize(function(){
var winWidth = $(window).width();
if (winWidth <= 700){
$('.basic_unit').css('font-size','2px')
}
else if (winWidth > 701 && winWidth <= 1200) {
$('.basic_unit').css('font-size','6px')
}
else
$('.basic_unit').css('font-size','8px');
});
But I suggest avoiding Javascript and doing it with css media:
@media screen and (max-width: 700px) {
.basic_unit {font-size:2px}
}
@media screen and (min-device-width: 701px) and (max-device-width: 1200px) {
.basic_unit {font-size:6px}
}
@media only screen and (min-device-width: 1021px) {
.basic_unit {font-size:8px}
}
Perfect formula for window-size based font size?
I found possible answer - this formula is some kind of 'vmax' polyfill (as for lack of IE11 support for this value).
Polyfill that I found looks very similar formula I was asking about:
https://gist.github.com/uto-usui/ea9836aa92d334e7694fb31d8e93a4f4
Related Topics
JavaScript Beforeunload Detect Refresh Versus Close
How to Save and Restore a File Object in Local Storage
JavaScript Error Null Is Not an Object
IE9: Why Setting "-Ms-Transform" Works from CSS, But Not with Jquery.Css()
Generating CSS Media Queries with JavaScript or Jquery
Toggle Divs Without Using JavaScript
How to Open an External Link in Safari Not the App's Uiwebview
How to Format a Float in JavaScript
Importing Lodash into Angular2 + Typescript Application
Differencebetween $(Window).Load and $(Document).Ready
How to Listen/Detect Changes to an Input Value - When the Input Value Is Changed via JavaScript
How to Call a Js Function Using Onclick Event
Js: Get Array of All Selected Nodes in Contenteditable Div
Bootstrap and Jqueryui Conflict
Resize Cross Domain Iframe Height