I'm a little confused and hope someone could explain this behaviour!?
I have the following code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
html{
font-size: 62.5%; // set the base font-size to 10px
}
body{
background-color: red;
}
#media only screen and ( max-width: 100em ) /* 1000px?? */ {
body{
background-color: green;
}
}
</style>
</head>
<body>
</body>
</html>
I think the background-color of the body should switch from red to green if the viewport is smaller than 1001px. But that doesn't work. The color is changing at 1600px. So it looks like font-size: 62.5% doesn't work!? The question is: why?
From the CSS Media Queries Spec
Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.
Try setting your font-size in the body:
body { font-size: 62.5%; }
I have a hunch it ignoring what you set in the html tag.
I agree with beautifulcoder.
I don't understand why you would do a percentage when you are trying to get an actual pixel height. I have never learned to control font size from the html tag either. It is always the body tag which is used. W3C schools will tell you the same thing.
body {font-size:10px;}
Related
I have this simple html file and I am trying to understand why my font size doesn't scale down when I move to mobile view. I though font-size:7em would adjust when moving from desktop to mobile.
I know this is super silly, but I can't understand. Do I need to use a #media query?
`
body {
background: black;
font-family: "Big Caslon";
margin-top:3em;
margin-bottom:3vw;
margin-left:12vw;
margin-right:12vw;
}
section {
color: white;
padding: 1em;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.title {
font-size:7em;
margin:10px;
}
<html>
<head>
<title>ShopDoran</title>
<link rel="icon" href="">
<link rel="stylesheet" type="text/css" href="doran.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<section>
<div class="title"> D O R A N </div>
<p style="font-size:2em; margin:10px;">coming soon </p>
</section>
</html>
`
First up you need to make sure you understand the different values css offer us so you can get a better idea of when to use each one.
The correct way to solve this would be for you to set up a #media query in your css file so it can change its values depending on the size of the screen, in this case 600px or smaller.
I would also recommend using rem instead of em's, as nesting em's might not always workout as you expect if you don't fully understand how it works, as for rem it is always based on the root font size so it's more predictable,
#media screen and (max-width: 600px) {
.title {
font-size: 2rem;
}
A more modern approach and a bit easier but sometimes chaotic would be to approach the font-size: with vw values which takes the viewport width as a value and depending on the amount of screen space the font will grow, this is not always recommended as text can get to big so you need to limit the max size for things not to get to crazy which you can do with the clamp:() function which is a more reliable way of using vw units in font-size: and keeping everything under control, you would end with something like this:
.title{font-size: clamp(2rem, 5vw+1rem, 7rem);}
hi #giaggi do use the unit '''font-size:7vw''' for the font size it should fix the issue
I think you should check the CSS Unit as #Burham B. Soliman mentioned, But I will draw a guideline on how you can make it:
1- Add Font size into your HTML body like this:
html{
font-size:16px;
}
2- Size the element font like this:
title{
font-size: 3rem;
}
3- Set A Media Query for desire viewport size (for example 600px):
#media only screen and (max-width: 600px) {
html{
font-size: 10px;
}
}
There are also other ways that you can handle this. It is just an example.
I'm interested in how youtube changes it's appearance based on the screen size without using javascript.
Try it yourself:
go to youtube and take a look at the navbar if the window size is smaller than 700px the logo changes.
This works even with javascript disabled.
I inspected the resources of the html css files of the page but couldn't find out how youtube does it.
If anyone knows the trick or has a guess - please answer.
They use mediaqueries a CSS3 function that is related to Responsive Design, this allow you to define in which size (known as breakpoints) the browser should render the website with a different set of CSS properties.
If you have a website with the following css stylesheet
body {
background: black;
}
#media (max-width: 600px) {
body {
background: gold;
}
}
Explanation: when the browser or screen width is over 600px, the body background should be black. In case the browser or screen is under 600px width, the body background should be gold.
body {
background: black;
}
h1 {
color: white;
}
#media (max-width: 600px) {
body {
background: gold;
}
h1 {
color: red;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Demonstration</h1>
</body>
</html>
:) Cheers.
they use the Responsive Web Design (Media Queries) :
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
I've got a problem with responsive design on mobile devices, please take a look at the code and the pictures. The difference between these two are the font-size of the html root element, I set one with percentage and the other one with px, but the one with percentage doesn't work in the right way while the one with px works just fine. And the numbers in the pictures indicates the width of the red div. According to the first part of my CSS code, the width of the div should be 320px in the first picture, but it is 450 and it will not change unless I set the font-size to a percentage larger than 52.1% or something, I don't remember the exact number, why is that? why the rems do not scale in the right way on mobile devices when setting font-size of root element by percentages? Please help.
HTML
<!DOCTYPE>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<script src = "main.js"></script>
<head>
<body>
<div id="div">Hello</div>
<div id="info"></div>
</body>
</html>
First Css
*{margin:0;padding:0;}
html{font-size:62.5%;}
#div{
width:50rem;
height:50rem;
margin:0 auto;
position:relative;
top:10rem;
font-size:5rem;
text-align:center;
line-height:50rem;
background:#ff0000;
}
#info{position:relative;top:10rem;font-size:5rem;}
#media screen and (max-width:500px){
html{font-size:40%;}
body{background:blue;}
}
Second CSS
*{margin:0;padding:0;}
html{font-size:62.5%;}
#div{
width:50rem;
height:50rem;
margin:0 auto;
position:relative;
top:10rem;
font-size:5rem;
text-align:center;
line-height:50rem;
background:#ff0000;
}
#info{position:relative;top:10rem;font-size:5rem;}
#media screen and (max-width:500px){
html{font-size:6px;}
body{background:blue;}
}
The result on my iphone for the first part of my code
The result on my iphone for the second part of my code
html{font-size:16px;}
body{font-size:62.5%;}
You need to ask yourself 62.5% of what? The default browser font size is html 16px as far as I understand and "The rem unit is relative to the root—or the html—element."
https://snook.ca/archives/html_and_css/font-size-with-rem
In my responsive.scss I used some advice I found recently come to think of it, sorry I don't have the link but the comment in the code is explanatory:
#media only screen and (max-width:320px)
{
/* addresses a Mobile Webkit browsers - Safari & Chrome - issue with text downsizing in portrait mode */
html.touch.webkit,
html.touch.webkit body
{
font-size:22px;
.button
{
font-size:12.8px;
}
}
I hope this helps.
After completing my whole website I was introduced to media queries as a way of making my website responsive. The thing is that even though I found many resources on Media queries and I know what to type they just don't work at all.
I first tried to test a media query in order to see how it works.
This is the code:
<style>
#media screen and (min-width:600px){
#bigfont
{
font-size: 80px;
line-height: 79px;
font-family: dosis, sans-serif;
font-weight: 300;
}
}
</style>
"bigfont" is already a style in css. So when placing a media query it is supposed to bypass the original style and apply the new parameters.
Since my laptop screen's width was larger than 600px I was expecting it to work but it didn't. My goal is to use media queries in order to scale up my content when it comes to a really big screen.
I even changed min to max just in case with no result.
UPDATE :
I forgot to mention that I already have this:
<meta name="viewport" content="width=device-width, initial-scale=1">
You need to add a viewport meta element to the head of your HTML page(s) for media queries to take effect. E.g.
<meta name="viewport" content="width=device-width, initial-scale=1">
Have you tried with #media all and (min-width:600px){? That usually fixed it for me.
If that does not work, try setting the values as !important (overwrites everything so far so you need to keep the !important part for larger screens, as you have min-width, and smaller if you have max-width).
#bigfont
{
font-size: 80px !important;
line-height: 79px !important;
font-family: dosis, sans-serif !important;
font-weight: 300 !important;
}
Mine only worked after I put the media query block after the original code.
So like this:
Main code{
.whatever{
}
#whatever{
}
}
#mediaquery{
.whatever{
}
#whatever {
}
}
Put !important tag i.e 'font-size: 80px !important;' to apply the new parameters
I've taken to using rem's to size fonts in recent projects, then using px as a fallback for older versions of IE.
I've also been setting a font-size of 62.5% on thehtml so I can more easily set font sizes later on in the stylesheet, I then set a font-size of 1.4rem on the body so unstyled elements have a base font-size of at least 14 pixels, see the code below:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }
The problem is, Chrome seems to handle this in a strange way ... Chrome seems to set the font sizes correctly on the inital page load, but on subsequent refreshes the font sizes are way bigger than they should be.
SEE FIDDLE (HTML copied below for future reference)
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
</body>
</html>
Remember, you might need to hit run once or twice in Chrome to see said effect.
Does anybody know what is causing this or if there's a way around it? Am I committing a crime by setting a 62.5% font-size on the html element (I realise there are arguements against doing so)?
The easiest solution that I have found is to simply change the body definition to
body {
font-size: 1.4em;
}
Because it is the body, you don't have to worry about compounding – just use rems everywhere else.
Try:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
*{font-size: 1.4rem;line-height: 1.6rem; }
body { background: #fff; font-family: arial; }
Seems to look better on refreshing the page :)
FIDDLE
Yes, this is a known bug in Chrome, which has been linked already.
I found
html { font-size: 100%; }
seems to work for me.
The * selector is very slow, as the author of this bug in Chrome, I'd advise a workaround like this until the bug is fixed:
body > div {
font-size: 1.4rem;
}
Provided you always have a wrapper div anyway ;)
This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem
The answer of Patrick is right.
We have the same issue on Android 4.4.3 WebView.
Before:
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
After:
html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
}
With em and not rem, it works !
The way I fix this is by setting an absolute font-size in the body-element. For all the other font-sizes I use rem:
html {
font-size: 62.5%;
}
body {
font-size: 14px;
}
.arbitrary-class {
font-size: 1.6rem; /* Renders at 16px */
}