Menu
Here is my code:
<p> font-size: 2vh; </p>
Text is nicely visible on high resolutions:
But on smaller resolutions:
How I can make text, that is not too small on smaller resolutions and not too big on high resolutions? If I have to use media-queries, then what's the point of vh/vw units?
My viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Small code:
<head>
<meta charset="UTF-8">
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="files/css/style.css">
</head>
<body>
<div id="logo">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Phasellus vel mattis risus.
Maecenas vel mauris ex. Curabitur mollis nibh sit amet egestas
fermentum. Ut posuere id sapien in suscipit. Integer a ultrices
metus, nec faucibus ipsum. Morbi nec venenatis nunc. In dignissim
dignissim velit ac finibus.</p>
</div>
</body>
css file:
html, body {
margin: 0;
padding: 0;
height: 100%;
text-align: left;
color: #FFFFFF;
background: #31302f;
font-family: 'Lato', sans-serif;
font-size: 18px; /* for internet explorer */
font-size: 2vh;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#logo p {
font-size: 20px; /* for internet explorer */
font-size: 2vh;
text-align: left;
}
494
vh units for font sizes are not ideal, since they are actually a percentage of the screen/device height. On a 480px high device 2vh means 9.6 pixels, which is definitely too small for regular text. IMO it's better to use the em or rem units.
rem relates to the basic ("root") font-size of the browser (which in a mobile browser usually is set in a way that fits the device), em is in relation to the font-size of the parent element - inherited, which can be a bit trickier. In both cases one rem/em means 100% of the referenced size (see above), so for example 1.6 rem is 160% of the root size, which can be a good value for a header.
63
You have to set the meta tag for mobile resolutions. Hence the resolution will be corrected for mobile screens.
<meta name="viewport" content="width=device-width, initial-scale=1" />
You can find the details here.
From your code there is no issue in your code. You will need to add media query to adjust the font size.
I have added a sample code.
<head>
<meta charset="UTF-8">
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin-ext" rel="stylesheet">
<style>
@media only screen and (max-width: 500px) {
#logo {
font-size: 25px;
}
}
</style>
</head>
<body>
<div id="logo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel mattis risus. Maecenas vel mauris ex. Curabitur mollis nibh sit amet egestas fermentum. Ut posuere id sapien in suscipit. Integer a ultrices metus, nec faucibus ipsum. Morbi nec venenatis nunc. In dignissim dignissim velit ac finibus.</p>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
