I can set my <p> tags to a certain text size. But when It's set i want to be my <h2> to be 20% bigger.
Is this even possible? If yes, could you guys please help me a little bit on my way?
This is what i tried:
h2, .h2 {
font-size: #font_size + px * 25%;
Thanks in advance.
Armando
Yes, you can use rem units for this.
The rem unit looks at the font size of the html or root element. So if you define your html unit size, you can scale your other font sizes based on that.
It looks like this:
html { font-size: 10px; }
body { font-size: 1.2rem; } /* 12 px */
h2 { font-size: 2rem; } /* 20px */
More information can be found here:
http://snook.ca/archives/html_and_css/font-size-with-rem
Keep in mind this is supported from IE9 and up:
http://caniuse.com/#search=rem
Related
I'm coding for a responsive website using basic CSS and HTML(without bootstrap).
now I wanna change the size of elements(caption font, picture size, etc) to be set up for size of various devices.
for example I have codes like below:
.footer-link{
font-size: 14px;
width: 80%;
padding-bottom: 20px;}
and want to reduce 10% of sizes by a code to have sth like:
.footer-link{
font-size: 12px;
width: 72%;
padding-bottom: 18px;}
I know about media . but with that I still need to rewrite every single code and size in each media! Actually i want to avoid rewriting by having some especial code that reduces all sizes in a media itself alone.
but I don't have any idea of doing this.
any recommendation please?
you can add #media query in css and add the max width in which the inner code will be vaild. for example:
#media (max-width: 600px) {
.footer-link{
font-size: 12px;
width: 72%;
padding-bottom: 18px;}
}
now only when the device have maximum width of 600px this code will be executed.
Also you can change the size to make it em,rem, vw, vh, % instead of normal px preoperty to make it more dynamic.
you can read more about how to make responsive website from here
Here is an example for a small device:
.footer-link{
font-size: 14px;
width: 80%;
padding-bottom: 20px;
}
#media (min-width: 576px) {
.footer-link{
font-size: 12px;
width: 72%;
padding-bottom: 18px;}
}
to do other sizes you just create a new media query and change the size, bootstrap 4's breakpoints look like this:
xs = Extra small <576px.
sm = Small ≥576px.
md = Medium ≥768px.
lg = Large ≥992px.
xl = Extra large ≥1200px.
Three methods:
ONE:
1) Use the rem scaling measurement
Do NOT use px, instead use the rem scaling measurement. rem is Root em and everything works from this :root value, this hiarachy is critical for step 2:
2) Use #media queries to control the root-em size
Once set, you can run a media query simply controlling the root-em (rem) value for each of your #media queries.
Example:
:root {
font-size: 16px; /* this sets 1rem */
}
.footer-link{
font-size: 0.9rem; /* 16 x 0.9 */
width: 5rem;
padding-bottom: calc(100% - 5rem);
}
#media screen and (max-width:500px){
:root {
/* Everything is magically a bit smaller */
font-size: 14px;
}
}
NOTE: Setting font-size: in the html{ ... } can maybe overwrite the browser font-size setting (unconfirmed by me).
TWO:
Using ONE above but also with CSS Variables for ease of adjustment.
Exampe:
:root {
/* percentage */
--widthValue: 80%;
font-size: 16px; /* this is still needed as sets 1rem */
}
.footer-link{
font-size: 1rem;
width: var(--widthValue);
padding-bottom: calc(100% - var(--widthValue));
}
#media screen and (max-width:500px){
:root {
/* Everything is magically a bit smaller */
font-size: 15px;
--widthValue: 76%;
}
}
This allows you to fine tweak adjustments that can not easily be scoped by rem values. Read more here.
THREE:
There was a third method in my mind when I started writing this answer but I think the two above should between them more than easily cover what you're looking for.
I know about media . but I still need to rewrite every single code and size in each media
Yes, you will need to update your basic CSS as written in your question, but that's inevitable as you're replacing static code with varaible driven code.
The solution I present is Dont Repeat Yourself (huh?) -- you only need to change one value in the #media query and all the styles cascade from that one simple change.
The sample code you provided is not a sample of responsive website. To be responsive we have to redesign and reorder elements. Some elements like images and backgrounds may need to be resized but the fonts, widths and paddings etc. should not be smaller when the screen is smaller. For example if you reduce the width of elements when the window is smaller in a small window you have nothing rather than elements with width:1% !
So I think you need a kind of ZOOM which may be appropraite for games and somethings special.
Besides without using CSS media queries and without rewriting css rules, the only way to zoom everything is JS codes. So I write simple sample to show how you can zoom everything according to the window size.
Please try resizing the window to check the effect:
var myDesignWidth=500; //this is the initial width which you design everything
$(window).on("load resize",function(){
var newZoom=$(window).width() / myDesignWidth;
$("body").css({"zoom":newZoom});
})
.footer-link{
font-size: 14px;
width: 80%;
padding-bottom: 20px;
display:inline-block;
background:url('https://d1o2pwfline4gu.cloudfront.net/m/t/13116/13106367/a-0270.jpg');
background-size:cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="footer-link">This is a footer link with background</a>
Can anyone explain this behavior to me?
https://codepen.io/anon/pen/BrRpeB
I don't understand how the computed font-size is larger for the inner <span> element than the outer <code> element...
:root {
font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}
span, code, div { font-size: 1.6rem; }
<code>Outer <span>inner</span> outer</code>
REM as I'm sure you know stands for root em, and em's are based on the font-size of the parent element. Since the font size for each element in your example is a percentage, as in a percentage of the element size, the differently sized elements cause different font sizes to be produced. If your original root font-size was a set amount like pixels, the result would be elements containing the same sized font, such as the code snippet below.
:root {
font-size: 16px; /* font-size 1em = 10px on default browser settings */
}
span, code, div { font-size: 1.6rem; }
<code>Outer <span>inner</span> outer</code>
How do I set my default text size so that i can transfer my text sizes for px's to em's?
On This thread, it was explained that em's work as a scale and therefore my text will be an appropriate size on mobile, but how do I set my default text size so that I can set my em sizes?
How do I set the measurement that I'm scaling by using em's?
You can set default text size for the document on the body element.
body {
font-size: 100%;
}
This will set the base font size to 100% - approximately 16px in most browsers. You can then assign font-sizes in relation to this.
For example:
h1 {
font-size: 2em; // This will render at 200% of the base font so around 32px
}
small {
font-size: .5em // This will render at 50% of the base font size
}
Remember though that these are relevant to their parent though, so putting a <small> element within a <h1> will mean that the small element will render at 50% of that of its parent - in this case back to the base font size... confusing right?
To counteract this I would use rem rather than em (there's also nothign wrong with using pixels for fonts). rem units always refer to the parent element - so .5rem will always be 50% of the base font size, regardless of the parent size.
Hope that helps.
set your body in percent and the rest in ems:
body { font-size:62.5%}; // this means 10 px
div { font-size:2em} // this will be 20px
p { font-size:1em} // this will be 10px
and so on...
Generally I set the body size to a fixed pixelage and then em the rest:
body {
font-size: 14px;
}
p {
font-size: 1em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
This gives a p size of 14px, h1 of 28px, h2 of 25px.
Equally if you want to use whatever size the browser uses just use:
body {
font-size: 1em;
}
Set Font Size With Em
h1 {font-size:2.5em;} // 40px/16=2.5em
h2 {font-size:1.875em;} // 30px/16=1.875em
p {font-size:0.875em;} // 14px/16=0.875em
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 */
}
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
Hey guys, I am trying to work out the calculation.
How do we get 14px for body and 24px for h1?
When html is given a font size as a percentage, it is calculated based on the font size preference set by the user in their browser options. This is usually 16px as a "standard" across browsers, but of course it may vary based on the user's own settings.
62.5% of 16px is 10px, giving html an absolute font size of 10px. From there, it should be easy to work out the sizes for body and h1.