I am using vh and vw units to style certain elements of a page. It's all working well when the initial containing block and viewport are of the same size. This is what it says in the spec:
The viewport-percentage lengths are relative to the size of the initial containing block.
But this way vh and vw are not the size I want, so how can I change the size of the initial containing block so that my vh and vw units are relative to this new size?
The size of the initial containing block is always the same as that of the viewport. You can't change this size (except via the viewport meta tag, which probably isn't what you're looking for).
#Pete Because my page is already styled in vh and vw units, and it's looking OK. But I wan't to fix the viewport size past the certain screen width, so that my design doesn't stretch.
What you want to do is write a media query for when the screen exceeds a certain width, then replace all your dimensions that use viewport units with your desired values.
Related
is there a way to prevent Windows text scaling on a webpage and show not scaled web page even if windows font is scaled to 125% or 150%.
As far as I am aware the only units that will not scale when the screen zoom level is increased are the viewport percentage units (vh and vw and those based on these). These can be set as any other units:
p {
font-size: 2vw;
}
The following is from MDNs explanation on these units:
vh: Equal to 1% of the height of the viewport's initial containing block.
vw: Equal to 1% of the width of the viewport's initial containing block.
vmin: Equal to the smaller of vw and vh.
vmax: Equal to the larger of vw and vh.
To see how you can use these for text, there is an article over at CSS-Tricks on Viewport Sized Typography. It might not be the right for every website, but it certainly is possible for the right use cases.
So I have text that I want to automatically resize based on the size of its container. However if I use something like
font-size: 5vw;
it looks good, but when I shrink the page the height starts getting way too small
Is there anyway that I can resize the text based on both vh and vw so, for example, if I just decrease the width of the page the height doesn't decrease too?
like if I only decrease the width of the page, I want the height of the text to stay the same and vice versa.
Basically I want the text to always fit inside the box perfectly and have same proportions no matter what the size of the page/container is?
Is there anyway to base font size on both vh and vw like this in CSS/HTML?
You can look into the vmin and vmax units.
While 1vw will return 1% of the viewport width and 1vh will return 1% of the viewport height, 1vmin will return 1% of the smallest viewport dimension, be it either the viewport width (vw) or its height (vh). Equally 1vmax will return 1% of whichever viewport dimension is the largest.
In order to have a whole container, including its text, to retain its aspect ratio you will have to apply the same kind of unit to both the container dimensions and its font size.
See the following example in full page mode and play around with the window width and height:
p {
width: 80vmin;
font-size: 6vmin;
}
<p>Try resizing both the width and height of the output frame. The <p> element and its contents will both respond to whichever dimension is the smallest.</p>
Note
Internet Explorer 11 and Edge 12 does not support the vmax unit. More on browser support here.
I have been using vw for some time now. I typically use a larger vw for the mobile first (anything under about a 700px viewport). I then adjust everything above that 700px viewport to one a size fits all vw value. That coupled with bootstrap's ease of use flexbox classes gives much less overhead to the css content.
I am trying to make a website with a fluid layout. So to do this I am trying to use percentages as measurements. If I am not mistaken, the percentages are calculated from the parent element. Since the html tags does not have any set width, how does the body tag calculate 100% width? does 100% means the full resolution of the screen that you are viewing the page?
thanks
You have to read the specs to find the answer to your question:
https://www.w3.org/TR/CSS22/visudet.html#x3 says about percentage widths:
<percentage>
Specifies a percentage width. The percentage is
calculated with respect to the width of the generated box's containing
block.
About containing blocks:
https://www.w3.org/TR/CSS22/visudet.html#containing-block-details says:
The position and size of an element's box(es) are sometimes calculated
relative to a certain rectangle, called the containing block of the
element. The containing block of an element is defined as follows:
The containing block in which the root element lives is a rectangle
called the initial containing block. For continuous media, it has the
dimensions of the viewport and is anchored at the canvas origin;
(...)
The root element is <html> (https://www.w3.org/TR/html-markup/html.html).
The screen is considered a continuous media.
The relationship between viewport and canvas is simple:
https://www.w3.org/TR/CSS22/visuren.html#viewport
https://www.w3.org/TR/CSS22/intro.html#canvas
User agents for continuous media generally offer users a viewport (a
window or other viewing area on the screen) through which users
consult a document. User agents may change the document's layout when
the viewport is resized (see the initial containing block).
When the viewport is smaller than the area of the canvas on which the
document is rendered, the user agent should offer a scrolling
mechanism.
So, trying to simplify this, the canvas size considers the content size even if it doesn't fit on the browser window.
The browser window contains the viewport (considered without menus, scrolling bar and status bar).
So, if <body> has 100% width, that means it would be the same width as the <html> element, which width is equal to the viewport's width.
You can easily find the viewport width by inspecting the css for <html> element on Chrome.
100% width for the body tag means 100% of the html width, which again is the full width of the viewport, which on desktops will be the browser window, on mobile devices the screen width.
Using just HTML and CSS would not suffice to get the width, you would need to use Javascript, or even better, a framework like jQuery that would help you get the body's width.
Using jquery the code would look something like this:
$(document).width();
You can find out more about it here.
I am having issues with a bug in a project I am working on.
The mobile menu which I want to take the full height of the viewport when it is less than 768px doesn't have a height even though I set it to 100%.
It will only be in view when toggled using the hamburger icon.
The nav element is absolutely positioned and the mobile menu is the last child element of the nav element.
The nav element is absolutely positioned so that the background is transparent and the section below it can be at the top of the page.
I want the div with class mobile_linksto take up the full height of the page when toggled on mobile devices.
I have got a workaround to it which is to set the position property of the section below the nav to relative and set top: -40px.
I will have to set the position property of the nav element to static as well for this to work.
However, I don't like this because it leaves a space between the two section elements on the page.
Is there a way I can get the mobile menu to have 100% height without having to change the position properties that I have at the moment?
Here is the link to the page I am talking about: https://carifood-init.appspot.com/
To troubleshoot your height: 100% problem, have a look at this post:
Working with the CSS height property and percentage values
As an alternative, use height: 100vh.
From the spec:
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.
vw unit - Equal to 1% of the width of the initial containing block.
vh unit - Equal to 1% of the height of the initial containing
block.
vmin unit - Equal to the smaller of vw or vh.
vmax unit - Equal to the larger of vw or vh.
Browser Compatibility (viewport units have pretty much full support among major browsers, except IE 9, 10 and 11, and Edge, don't support vmax)
use jquery for this job: There is an example i used to make height of a section 100% of screen (depending on the device that watch the page it will perform more or less height, so it's responsive).
<script>
$(document).ready(function(e) {
var wheight = $(window).height();
$('.section').css("min-height", wheight);
});
</script>
Hope it helps!
Currently working on my first highly responsive site. I've worked through a few basic tutorials about that topic, though I've often noticed that they rely on slightly older mobile devices and they switch the designs by #media depending on the screen size attributes.
Now we have mobile devices which have the same FullHD resolution on a 6" screen like on a 24" monitor... so that can impossibly work.
So what can I use to scale text and things like menus correctly? I'd like not to use percentage values absolutely everywhere.
My intuitive idea would be to compute a reference size of which I know that it has always the same size on the screen. Or at least something what can give me a hint of how to adjust the sizes.
I tried to used the "em" measurement in CSS for that by creating an element with this size and then measure it's height via Jquery, since from how I understood it, "em" is a browser-depending size.
Still the result is always 16px, no matter what browser I use...
So what type of relative size reference is usually used for this issue?
Thanks in advance!
You have differents units for relative length in CSS :
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
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
% Relative to parent
The em and rem units are practical in creating perfectly scalable layout!
Source: http://www.w3schools.com/cssref/css_units.asp
You probably want to try using the min-device-pixel-ration media query (have a look at https://css-tricks.com/snippets/css/retina-display-media-query/)
If you have the same number of pixels on a 6" screen as you would normally get on a 24" monitor it is almost certainly going have a ration greater than 1 on the smaller screen. Otherwise it would be virtually impossible to read!
the default value for an em unit is 16px - however, you can reset this value to anything you want by changing it in the body tag.
body {
font-size: 1em;
}
So using that example 1em = 16px, 2em = 32px, 3em = 48px ect.
This website is a great resource for how to scale ems so you don't have to do the math: http://type-scale.com/
Keep in mind when using ems there is a compounding effect when using nested elements. So if you have a div with a font-size of 1em, inside of a div with a font-size of 2em, you will actually end up with a font size of 3em.
To prevent this you can either pay attention to your nesting, or use rem units. rem stands for root em and will always scale relative to the root element and ignore multiple nesting values.