Definition says 1vw = 1% of viewport width. But I don't get it what does it mean when used with font-size? For instance what does it mean if I set:
h1 {
font-size: 10vw;
}
I thought that if I have h1 with 10 characters it would take 100% of viewport, but it does not.
Font-size refers to the vertical size of the font not character width
See the demo below for how they react differently.
h1 {
font-size: 10vw;
}
h1:nth-of-type(2) {
font-size: 10vh;
}
<h1>MY HEADER</h1>
<h1>MY HEADER</h1>
JSfiddle Demo
As Paulie_D stated:
Font-size refers to the vertical size of the font not character width.
If you're looking for the width of the character, you might want to look at font-weight (for the thickness of a character) or font-kerning (for the spacing between characters).
the vw unit is based on the width of the viewport.
1vw is 1% of the browser viewport width. (vh is the corresponding value for height)
This means if the viewport is 600px wide then 10vw is 60px and that's how high your font will be
It also means that dimensions, including heights, can be set relative to the width of the screen, which is very useful for maintaining aspect ratios. This means your font size will respond to the size of the viewport, something which you can't do with a font any other way
It's not supported in all cases, so it's good to provide a pixel fallback, like this:
height: 100px; /* over-ridden if vw can be interpreted */
height: 10vw; /* ignored if not understood */
Related
How do I set the height of a div container for example that should be 60% of the screen height?
Setting the 60% as the height in css works fine if the browser window is not resized. But if I shrink the browser window, the div shrinks accordingly.
https://zurb.com provides a nice example. The "Mission Accomplished", grey part is always the same height, no matter how the browser window is being resized. How can this be ensured?
I don't want to use px to ensure HiDpi support.
Thanks,
That's a simple fixed-height element; it has nothing to do with screen size.
You should just use px and not worry about anything; px means logical pixels and will work with arbitrary DPIs.
While the page in question simply used a fixed height (px) for the element in question, meaning that it will always have the same height (and won't be 60% of the height regardless of viewport height). In order to have an element be relative to the viewport, you're looking for viewport-sized typography.
To adjust based on height, you're looking for the CSS unit vh, which tells the element in question to scale based on the viewport height. You can also use vw to scale based on the viewport width.
Keep in mind that <body> has a default of margin: 8px, so if you want to avoid scrollbars when using viewport-sized typography, you'll also need to override this back to 0.
body {
margin: 0;
}
div {
height: 60vh;
width: 100vw;
background: red;
}
<div></div>
For more in-depth information on CSS units, I'd recommend checking out this guide.
Hope this helps! :)
Should I use em or % for margins and paddings? For example:
.box{
display: inline-block;
width: 20%;
background: #bada55;
margin-right: 5%;
}
https://jsfiddle.net/8t4a9shn/
There is no real answer to that as em and % or completely different units:
em is relative to the font size of the parent element
% is relative to the viewport width or height
So it always depends on your use case.
Use in em or px,
because these value is static,
means not change with screen Resolution and Size.
but % is changeable according to screen Resolution and Size.
If you have any other doubt please explain properly.
As per How to properly use css-values viewport-relative-lengths?, I've tried using viewport units in the following way, to automatically magnify a tiny page on a big monitor:
/* automatically magnify business-card-style page in large viewports */
#media (min-width: 50em) and (min-height: 64em) {
/* start with 100% at 50em, we'll have 150% magnification at 75em */
html {font-size: 2vmin;}
}
However, when tested in Google Chrome, it made the zoom feature to mostly stop working.
Is it a bug/feature in Chrome for the zoom to immediately stop working with the above code in place, or is it by design and by the spec?
AS per definition vw/vh/vmin/vmax are units related to the viewport width:
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
div{
height: 3rem;
border: 1px solid red;
margin: 1rem;
}
The following div has style="width:10vh"
<div style="width:10vh"></div>
The following div has style="width:10vw"
<div style="width:10vw"></div>
If you see in the example, as you resize the window the divs are changing its width. If you apply zoom but the view port doesn't change size it will not apply any change.
Maybe you have to check any additional property set in the viewport meta tag in your html header and check if its blocking the way it should scale on zoom. This article could help you to check it https://css-tricks.com/snippets/html/responsive-meta-tag/
I want a single form of my website to follow a simple rule: the page must appear identical at every resolution you watch.
So I need h1 be height, e.g., 10% of page, h2 be 7%, etc..
Is there a way to realize this with CSS?
Well, as a pure CSS solution you could use vh Viewport-percentage lengths for elements to specify their font-size/line-height base on the viewport height:
EXAMPLE HERE
h1 { font-size: 10vh; line-height: 10vh; }
h2 { font-size: 7vh; line-height: 7vh; }
5.1.2 Viewport-percentage lengths: the vw, vh, vmin, vmax units
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. Note that the initial containing
block’s size is affected by the presence of scrollbars on the
viewport.
vh unit
Equal to 1% of the height of the initial containing block.
It's worth noting that vh unit is supported in the modern web browsers (including IE9+).
I have the following code :
CSS
#container{
font-size: 0.625em;
}
#div1 {
width: 200px;
height: 200px;
background-color: green;
}
#div2 {
width: 20em;
height: 20em;
background-color: red;
}
HTML
<div id="container">
<div id="div1">
This is a test message.This is a test message.This is a test message.This is a test message.
</div>
<div id="div2">
This is a test message.This is a test message.This is a test message.This is a test message.
</div>
</div>
Chrome Version
Version 35.0.1916.153 m
When you zoom to 50% or smaller in Chrome, the size of the two divs will become different.
If your check the font-size in dev tool, your will realize that
Chrome automatically increased the font-size of the document.
Can anybody tell me why this happens?
And how could I prevent it?
I am doing some research on the difference of em and px, so change the width of #div2 to 200px is not acceptable.
JsFiddle Link
Updated the content and source.
Thank you for your help.
Updated June 16th, 2014
Found something interesting and wanna share with you guys here.
If you had ever touched the "Advanced font settings" in Chrome, or using an default version(not Chinese or Japanese):
you will never be allowed to set font-size to some number smaller than 6px(in Chinese or Japanese version it will be 12px).
1em will never go smaller than 6px(12px), when you measure something like "height" with "em".
if you set a text to 6px, and zoom to 50%, you may expect to see the text rendered like 3px(become to half). But the text will be set to 12px by chrome, and may break your layout.
Thanks to Dawar Husain. He helps me realize the minimum font size thing.
See, you used px for the first div and em for the second.
Chrome has a minimum font size and fonts smaller than it will be displayed as that font size only. (see your Chrome Settings)
Now, using div with px, the box goes on and becomes even smaller on zooming at 33% (or 25% or 50%) but using em, the box remains the same size when the minimum font-size has been reached. see
em is useful on browsers which implement zooming by scaling the font size like Chrome. So if you size all your elements using em they scale accordingly.
em makes sure that the whole content is displayed as it is even if the size of div changes (on zooming). Hope you got your answer :)
EDIT
In IE10, there's no minimum font size in settings as in GC35. So the em px render like each other.
The divs has different width.
10em is not always equivalent to 100px
try setting the same width (em or px)
An em is equal to the current font-size, for instance, if the
font-size of the document is 12pt, 1em is equal to 12pt
One pixel is equal to one dot on the computer screen
refer this page for documentation
your updated fiddle here
body {
font-size: 0.625em;
}
#div1 {
width: 200px;
height: 200px;
background-color: green;
}
#div2 {
width: 200px;
height: 200px;
background-color: red;
}
update
if it doesn't work try with this css property
-webkit-text-size-adjust: none;