So I make my font size in vw and I read that if I make my img size in rem they will be dependent on the font size but no its not like that the text go smaller but pictures stay the same :/
Im new to html/css sorry for the question
It seems that your problem is that you're using rem and not em. rem refers to root em, meaning the font size of the root element. em simply refers to the font size of the parent element. If you're trying to change an image's size depending on the font size, I would recommend using em over rem.
Related
I have a design that is made in Canva.com which I'm trying to convert to HTML, CSS document. In Canva texts have different sizes like 12, 42 etc. (I'm not sure if those are pixels). What I'm trying to do here is making the page responsive (which would resize texts when screen is smaller) and sizing texts not relative to other elements (maybe their parent element).
Let's say I have two text elements and I want to size them accordingly:
Text A = 12 Canva text size unit
Text B = 24 Canva text size unit
I want to size Text B accordingly so it would look two times bigger than Text A.
If I use font-size: 1.2em for Text A, and font-size: 2.4em for Text B. Would it make things look as I expected them to be? So, is 1.2em+1.2em = 2.4em?
So, is 1.2em+1.2em = 2.4em?
Not necessarily: em is relative to the defined font size for the current tag/class/ID, so it doesn't work when combining different tags (especially headers like h1 - h6, but also p, li etc.). If you need font size relations like 1.2 + 1.2 = 2.4, it's better to use rem as a font size unit. It always relates to the defined (or if not defined: browser default) font size for the html tag.
In most word processing or print design programs, the text size is in pt units. It's common for websites to use rem for responsive size. Fixed size units like rem are additive, where 1rem is half the size of 2rem.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths
I want to create a page using only "em" for font size.
The page is going to have a grid (tiles) with each cell having one image with some text above and below the image. The images are all in 200px X 200px in size. The Grid Cell would be somewhat larger than the image to accommodate the text areas.
How should I go about setting the height and width of the Div and Img tag, given that I want to rely only on "em" and not "px" for font size.
em is a relative unit of measurement that inherits its value from the font size of the parent element, so to apply consistent widths to your img elements using em you'll need to define a font size somewhere in your document structure using a measurement in px and inherit from that.
For reference's sake, where 1em equals 16px, an image with a width of 200px would be 12.5em wide- 200 / 16.
You'll want to specify your own measurement in px at least once in any case to ensure cross-browser compatibility. Not every browser uses the same default font size and it's possible that users have manually changed the default font size of their browser. If you rely on defaults, you very likely won't get consistent results, and it will be detrimental to your grid design.
How can browsers understand the em unit when used in a responsive image?
<img alt="A giraffe" src="giraffe.jpg"
srcset="giraffe#1.5x.jpg 600w, giraffe#2x.jpg 800w, [etc.]"
sizes="(max-width: 40em) 40em">
This validates, and I'm not seeing warnings in browser consoles. But if the whole point of the image preloader is to fetch images before the CSS is downloaded and parsed, what does the browser use for em?
Is it just its default font-size that it applies to <html>? Should I use rem for clarity? Is there a difference between the two when the user zooms?
This isn't theoretical; I'm using em in my media query breakpoints, and some images are constrained by a container sized for optimal line length (using em, of course).
I checked the spec, but it's remarkably terse on the new responsive image features.
I bent the ears of the guys inside the official W3C #respimg chatroom, and this is what they had to say:
<Tigt> Pardon me folks, I had a question about how em is interpreted when used inside sizes
<TabAtkins> Tigt: Same as in Media Queries - they're relative to the initial font size.
<TabAtkins> (Not the font size on <html>, the initial font size, as set by the user's personal settings.)
<Wilto> 16px almost everywhere, so long as you haven’t changed the font-size of html.
<TabAtkins> Tigt: rem is treated identical to em here.
So the speed-read is:
When used in sizes or media queries, em and rem are both specced to mean "the user's default font-size.
The actual em or rem that controls how the image is laid out on the page can end up different if your CSS changes it
This means one should not change the default size of em if they want to give the image preloader truthful information
W3C Media Queries:
This media query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.
#media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
The ‘em’ value is relative to the initial value of ‘font-size’.
5.1.1. Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units
Aside from ‘rem’ (which refers to the font-size of the root element), the font-relative lengths refer to the font metrics of the element on which they are used. The exception is when they occur in the value of the ‘font-size’ property itself, in which case they refer to the computed font metrics of the parent element (or the computed font metrics corresponding to the initial values of the ‘font’ property, if the element has no parent).
em unit
Equal to the computed value of the ‘font-size’ property of the element on which it is used.
http://www.w3.org/TR/css3-values/#font-relative-lengths
em css units are equal to the font size of the current element. The font-size property is inherited. Therefore the element (img in this case) will be sized according to 40 times the font-size property. If the user zooms the page (which increases the font size) the em unit's update to that of the font-size property automatically.
The base font size will be determined by the browser, if the browser is running on windows on mac and the user has not changed the font size then base font size will be 16px (usually). On Linux, BSD or any other system the font size will be set by the desktop environment and can vary.
So while conservatively you could assume that the font size is 16px, in a lot of cases you would be wrong.
I'm designing a website using rem unit, some people said, rem unit change the size based on screen size.
I try to drag the browser window to mobile size, and see from the chrome develop (the computed style)
And what I see is, it's still same like the desktop size. same 21px.
It doesn't change.
Can you explain, what does rem unit do?
Thanks.
The rem unit means the font size of the root element, which is the html element in HTML documents. That is, it is the “root em”. It has absolutely nothing to do with screen size.
The only thing that you gain by using rem rather than em is that you avoid doing some calculations yourself. Instead of taking into account the nesting of elements that may have different font sizes, you can anchor your font size settings to the font size of the root element. And what you lose is that some oldish browsers do not know the rem unit, so your rem based font size settings are ignored by them.
The practical way to make font sizes depend on screen size or window size (two different concepts) is to use CSS #media queries to set font-size (in some units) depending on the screen or window size (usually the width).
In most of websites, while I change the zoom level of browsers, the font size will also increase and help user to see them. For some reasons, that just won't work on my new website. While I change the zoom level of the browser, everything changes but all font size keep the same. Is there a css or html property that I can use to control this behavior? Thanks
here is an example:
http://ca.skywatcher.com/index.php
The problem is that you have set -webkit-text-size-adjust: none; for the body in layout.css. Changing it to -webkit-text-size-adjust: auto; allows the zooming of the fonts along with the page.
Edit: Corrected the CSS. Should be auto not 0
Fonts using a specific pixel size are not relative (along with several others). Zooming changes that relative information.
From http://www.westciv.com/style_master/academy/css_tutorial/properties/values.html
Name Abbrev. Explanation Relative?
em em The height of a font yes
ex ex The height of the letter x in a font yes
pica pc 1 pica is 12 points no
point pt 1/72 of an inch no
pixel px One dot on a screen no
millimeter mm Printing unit no
centimeter cm Printing unit no
inch in Printing unit no
If you're using a fixed-point width for your font-size settings (e.g.: pixels), then your font size will remain unchanged when the user zooms. If you want the font to enlarge or diminish when the user zooms in/out, then consider using em as your unit (1 em = 100% of the default font size on the user's machine).