Viewport units vs percentages. A Quick Guide to CSS Units
CSS3 has new units of measurement. (I think I already talked about this. eng) You've already heard about px, pt, em and the new rem. Let's look at a few more: vw and vh.
Often there are elements in a layout that are guaranteed to fit into the browser viewport. IN general case JavaScript is used for this. Let's check the size of the viewport and resize the elements accordingly. If the user resizes the browser window, the procedure is repeated.
Using vw/vh we can set the size of elements relative to the size of the viewport. The vw/vh units are interesting because 1vw is a unit equal to 1/100th of the viewport width. To assign an element a width equal to the viewport width, for example, you need to set width:100vw.
How it can be used
Lightboxes are a great candidate for using vw and vh as they are usually positioned relative to the viewport, however I find that position:fixed with top, bottom, left and right values is easier to use since you don't have to set the height and width at all.You can use the new units to set the sizes of elements that are in normal flow. For example, I can post screenshots on the page. The height of these screenshots should not exceed the height of the viewport. For this I can set maximum height images:
Img ( max-height:95vh; )
IN in this case I set the height to 95vh to leave some space around when they are on the screen.
Browser support
If rem is supported by almost all major browsers including IE9, then using vw and vh is worth holding off on. On this moment only supports them Internet Explorer 9.From the author: Several years have passed since the first appearance of viewport units in CSS. These are truly adaptive length units; their value changes to fit the size of the browser window. If you've heard about them but never looked into the details, this article is for you.
Units of measurement and their meaning
There are 4 types of viewport units in CSS: vh, vw, vmin and vmax.
Viewport height (vh) – based on the viewport height. The value 1vh is equal to 1% of the viewport height.
Viewport width (vw) – based on the viewport width. The value 1vw is equal to 1% of the viewport width.
Viewport minimum (vmin) – based on the minimum side of the viewport. If the height of the viewport is less than the width, the value of 1vmin will be equal to 1% of the height. Likewise, if the width is less than the height, then 1vmin will be equal to 1% of the viewport width.
Viewport maximum (vmax) – based on big side viewport. If the viewport height more width, then the value of 1vmax will be equal to 1% of the viewport height. If the viewport width is greater than the height, then 1vmax will be equal to 1% of the width.
Let's see what values we get in different situations:
If the viewport is 1200px wide and 1000px high, then the value of 10vw will be 120px, and 10vh will be 100px. The width of the viewport is greater than the height, so 10vmax will be equal to 120px, and 10vmin will be 100px.
If you rotate the device so that the width becomes 1000px and the height 1200px, then 10vh becomes 120px and 10vw becomes 100px. Interestingly, 10vmax will remain 120px, because now the value is determined by the height of the viewport. The value of 10vmin will also remain 100px.
If you shrink the browser window to 1000px wide and 800px high, then 10vh would be 80px and 10vw would be 100px. Likewise, 10vmax will become 100px, and 10vmin will become 80px.
At this point in your viewport, units may not differ much from percentages for you, but the difference is large. In the case of percentages, the width and height of the child elements depend on the parent block. Example:
In the demo you can see how the width of the first child element occupies 80% of the width of the parent. The second child has a width of 80vw, making it wider than its parent.
Applying viewport units
These units are based on the dimensions of the viewport, so they are very useful in situations where the width, height, or dimensions of elements need to change depending on the dimensions of the viewport.
Full screen background images and sections
On the Internet, you can often find background images on elements that occupy the entire screen. The same can be done in website design so that a separate section about a product or service occupies the entire screen. In such cases, you can set the width of the elements to 100% and the height to 100vh.
Let's look at the next one HTML example:
a
< div class = "fullscreen a" > < p >a< p > < / div > |
The CSS below will stretch the section below background image full width:
Fullscreen ( width: 100%; height: 100vh; padding: 40vh; ) .a ( background: url("path/to/image.jpg") center/cover; )
Fullscreen ( width: 100%; height: 100vh; padding: 40vh; background : url ( "path/to/image.jpg" ) center / cover ; |
Ideal Headings
You may have heard or even used jQuery plugin FitText. Using this plugin you can scale headers so that they take up the entire width parent element. As I said earlier, the value of viewport units directly depends on the size of the viewport. That is, if you specify the font-size of headings in viewport units, then they will ideally fit each screen. If the viewport width changes, the browser will automatically change the title. You just need to determine the right one original meaning for font-size.
the main problem with font-size and viewport units is that the text size will vary greatly depending on the viewport. For example, a font-size of 8vw will make the header 96px for a viewport width of 1200px, 33px for a viewport width of 400px, and 154px for a viewport width of 1920px. The font may be too large or too small for easy reading. Read more about correct installation text sizes using units of measurement and calc functions() can be found in a wonderful article about typography in viewport units.
Easy centering of elements
Viewport units can be very helpful when you need to place an element exactly in the center of the user's screen. If the height of the element is known, then you just need to set the upper and lower values margin properties in [(100 - height)/2]vh.
Centered ( width: 60vw; height: 70vh; margin: 15vh auto; |
What to remember
If you decide to use a unit viewport in your projects, there are a few things you need to keep in mind.
When working with CCS, it is very easy to get stuck at some point, because sometimes even when working using a familiar method, it happens that new problems appear.
As the Internet grows, so does the demand for new solutions. And since you and I are web designers and front-end developers, we have no other choice but to be able to work with various options and be able to work well.
This means that we need to be able to work well even with those specific tools that are usually used very rarely, but there are situations when they are needed.
Today we would like to tell you about some CSS tools. Each of these tools is like a unit of measurement, such as pixels or ems, but you most likely did not know about them.
Let's start with something that looks like something you're probably already familiar with. The em unit is defined as the current font-size. So, if you, for example, set the font-size on the body element, then the em value of any lower element within the body will be equal to that font-size.
Here we wrote that the div's font-size will be 1.2em. This is 1.2 times larger than the font-size it inherited from, which was 14px. So the result is 16.8px.
However, what happens if you cascade em-defined font-sizes inside each other? In the next passage we apply the same CCS as above. Each div inherits font-size from its parent, giving us progressively larger font sizes.
While this may be appropriate in some cases, often we want to simply rely on a single metric for measurement. In this case we should use rem. The “r” in rem stands for “root”; it is equal to the font size set in the root element; in most cases it is an HTML element.
Html (font-size: 14px; ) div (font-size: 1.2rem; )
In all three divs from the previous example, the font can reach 16.8px.
5 points, Grid
Rem are useful for more than just font calibration. For example, we could base an entire grid system or UI library on the use of size HTML font root rem, and use their calculation in certain places. This would give us more predictable font calibration and calculations.
Container (width: 70rem; // 70 * 14px = 980px )
The concept of the idea is to allow our interface to be commensurate with the size of the content. Although it is not necessary that in every case it has the same meaning.
vh and vw
Responsive web design techniques rely heavily on the percentage rule. However CSS percentage- not always The best decision for every problem. CSS width is related to the closest element that contains the parent. What if we want to use viewport width or height instead of width original element? This is exactly what the vh and vw units help do.
The vh element is 1/100 the height of the viewport. For example, if the browser height is 900px, 1vh can be as high as 9px. Also if the viewport width is 750px, 1vw can reach 7.5px.
It seems that this rule can be used endlessly. For example, a very simple way to achieve using one single CSS strings full height or approximately full height slides can be:
Slide ( height: 100vh; )
Let's say you want to make a title that fills the entire width of the screen. To do this you need to set font-size to vw. This size will be comparable to the width of the browser.
vmin and vmax
While vh and vm are always related to the height and width of the viewport, vmin and vmax are also related to the maximum and minimum of that height and width, depending on which is smaller and which is larger. For example, if the browser has settings of 1100px wide and 700px high, 1vmin would be 7px and 1vmax would be 11px. However, if the width is set to 800px and the height to 1080px, then vmin will be 8px while vmax will be set to 10.8px.
In what cases can you use these values?
Imagine that you want an element that remains visible on the screen at all times. Using height and width, set by value vmin below 100 will allow you to achieve this. For example, a square element that touches at least two parts of the screen could be defined like this:
Box ( height: 100vmin; width: 100vmin; )
If you want a square that will cover the entire visible area of the viewport, use the same rules, except vmax.
Box ( height: 100vmax; width: 100vmax; )
The combination of these rules will allow you to use the size of your viewport very flexibly and with maximum productivity.
ex and ch
The units ex and ch, as well as em and rem, are related to the current font and font size. However, since they are based on font-specific measures, ex and ch also map to font-family, as opposed to em and rem.
The ch unit, or character unit, is defined as a "improved measure" of the width of the character 0. This concept has caused much debate, but the basic idea is that given a fixed-width font, a square with a width of N unit characters such as width: 40ch; can always contain a sequence of 40 characters in that particular font. While normal use This particular rule lies in the arrangement of braille, the possibilities for creativity here, of course, extend beyond these simple statements.
The ex unit is defined as "x-height of the current font OR one-second of em". Thex-height of this font - height lowercase letters x of that font. Most often, this is around the middle mark of the font.
There are many areas where such units can be used. Most often in the printing house. For example, the sup element, which acts as a superscript, can be added to the line using the appropriate position and final value 1ex. You can reset the bottom element in the same way. Browser errors are fixed by superscript- and subscript-specific vertical-align rules, but if you want more control, you can try the following:
Sup ( position: relative; bottom: 1ex; ) sub ( position: relative; bottom: -1ex; )
Conclusion
It's important to keep up with the development and spread of CSS, as well as learning about new tools and adding them to your skill list. Most likely, you will encounter problems that can be solved with the help of these units. Take your time and read the specification. Subscribe to updates from cssweekly. And of course, don't forget to subscribe to weekly updates and free tutorial videos on Tuts+!
: vw, vh, and vmin. Recently, the dev version of Chrome (number 20) also supports them, and this gives some hope that developers of other browsers will follow this example. In fact, this would be useful, because it is very convenient and practical, and I will try to tell you why this is so.
Why is this cool?
Many reasons. Here are two of them:
- There is such a thing as the length of a line of text at which reading is comfortable. I don't want to start a holiwar, but let's say it's 80 characters. So, these units of measurement allow you to maintain this value on any screen size
- They can also adjust the relationship between the title and the body text, as in one of Trent Walton's posts.
How it works?
The unit of each of these three values is 1% of the screen size. For example, if the screen size is 40 centimeters in width, then 1vw is equal to 0.4 cm.
1vw= 1% window width
1vh= 1% window height
1vmin= 1vw or 1vh, whichever is less
Usage
Oh, it's very simple:
H1 (font-size: 5.9vw; ) h2 (font-size: 3.0vh; ) p (font-size: 2vmin; )
Browser support
Chrome 20+ And IE 10+
I checked in Opera Next (12), Safari 5.2 and Firefox Beta (13) - to no avail.
Demo
A short video showing the use of vw:
You can try it yourself (make sure your browser supports these units of measurement)
Bugs
There is support in Chrome 20, but it's a little lopsided. When the browser window is resized, the font does not adjust to fit the new window size. The specification says:
If the height or width of the window changes, they are scaled accordingly
I submitted a request to the bug tracker. Perhaps this is not a big problem, the font still changes on a “clean” page load. Such little things are only interesting to us, design geeks who treat such things carefully, but still.
To fix this problem (allow resizing without reloading the page), you need to cause the element to redraw. I used jQuery and just experimented with the z-index values of each element that causes the redraw.
CauseRepaintsOn = $("h1, h2, h3, p"); $(window).resize(function() ( causeRepaintsOn.css("z-index", 1); ));
Not only font-size
By the way, these are just a few. Like em , px , whatever. You can use them everywhere, it's not just limited by the font size.
Use it!
Native usage
Don't forget to leave a callback for those browsers that do not yet support these units:
H1 (font-size: 36px; font-size: 5.4vw; )
Support check
Modernizr doesn't have a test for this check yet, but you can check it yourself using small script in JS.
Var testEl = $("#vw-test"); var viewport = $(window); testEl.css(( width: "100vw" )); if (testEl.width() == viewport.width()) ( $("html").addClass("vw-support"); ) else ( $("html").append("vw-unsupported") ; ;
Imitating functionality with FitText.js
This idea is that it relates the overall width of the header to the width of the parent element, which is what FitText.js does. True, he does this through Javascript, mathematics, span tags and a bunch of other things. In theory, you could run a check and use Modernizr.load to load FitText.js if no support is found.
