Font size with percentage value (%) not scaling with screen size
I think what you're looking for are viewport percentage units.
Try this:
.about-content-title h1 { font-size: 5vw; }
With this adjustment, when you re-size the browser window the font will scale in size.
From the spec:
5.1.2. Viewport-percentage lengths: the
vw
,vh
,vmin
,vmax
unitsThe 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.
- vw unit - Equal to 1% of the width of the initial containing block.
- vh unit - Equal to 1% of the height of the initial containing
block.- vmin unit - Equal to the smaller of
vw
orvh
.- vmax unit - Equal to the larger of
vw
orvh
.
Using percentage values (%) doesn't scale your fonts relative to the viewport because these values are relative to a parent or ancestor. See the spec: 4.3. Percentages: the <percentage>
type
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.
Font scaling based on size 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
Responsive font size in CSS
The font-size
won't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press Ctrl and + together on the keyboard while in the browser.
Media Queries
You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.
For example, try adding this inside your CSS at the bottom, changing the 320 pixels width for wherever your design starts breaking:
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
Viewport percentage lengths
You can also use viewport percentage lengths such as vw
, vh
, vmin
and vmax
. The official W3C document for this states:
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.
Again, from the same W3C document each individual unit can be defined as below:
vw unit - Equal to 1% of the width of the initial containing block.
vh unit - Equal to 1% of the height of the initial containing block.
vmin unit - Equal to the smaller of vw or vh.
vmax unit - Equal to the larger of vw or vh.
And they are used in exactly the same way as any other CSS value:
.text {
font-size: 3vw;
}
.other-text {
font-size: 5vh;
}
Compatibility is relatively good as can be seen here. However, some versions of Internet Explorer and Edge don’t support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.
(Flex) - Adobe AIR - font-size with em? With percentage?
In Flash/AIR, CSS is parse a little bit different and only numbers are useable:
fontSize - Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
See: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/StyleSheet.
Flash/AIR also has different CSS media queries. If you end up going this route you would probably want to use something like the application-dpi
:
@media (application-dpi: 160) {
.someStyle {
font-size: 12px;
}
@media (application-dpi: 240) {
.someStyle {
font-size: 14px;
}
See: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf62883-7ff2.html#WS19f279b149e7481c4a89460c12d804a111e-8000
You probably could also try modifying the styles through code:
var tf:TextFormat = new TextFormat();
if(someScreenSizeVariable < 640) {
tf.size = 10;
} else {
tf.size = 13;
}
StyleManager.setStyle("textFormat", tf);
See: http://help.adobe.com/en_US/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7f5b.html#WS5b3ccc516d4fbf351e63e3d118a9c65b32-7f3b
Website elements and fonts are too small in mobile devices
You can try adding the viewport
<meta>
tag :
<meta name="viewport" content="width=device-width, initial-scale=1">
- Using the viewport meta tag to control layout on mobile browsers
Related Topics
Bootstrap 3 Flush Footer to Bottom. Not Fixed
Clear Canvas Rect (But Keep Background)
Angular2 Without Hash in The Url
What Are All The Differences Between Src and Data-Src Attributes
Bootstrap 4: Center Inline Form Inside a Jumbotron
CSS Selector for No-Children-But-Not-Empty
Always Show Browser Scrollbar to Prevent Page Jumping
How to Make Children Auto Fit Parent's Width Only with CSS
CSS 100% Height, and Then Scroll Div Not Page
HTML5 Alternative to Flash-Based Zeroclipboard for Safe Copying of Data to Clipboard
How to Print HTML Source to Console with Phantomjs
How to Get a Flexbox to Have a Center Fixed and a Bottom Fixed Children Together
Twitter Bootstrap: Column Re-Ordering for Full Width Divs
Converting HTML Text into Plain Text Using Objective-C
Why Does 100% Not Mean 100% Height
Three Column Layout: Fixed Width Center with Fluid Side Columns