I've set the rem value to:
html {
font-size: calc( 13px + ( (100vw - 767px) / 767 ) );
}
It is equal to 13 pixels on 767px wide screens, bigger on bigger screens and smaller on smaller screens.
Everything works like a charm, except that I get weird gaps when animating inline elements with CSS transform's when their size is set with rems. I made a few tests and seems like the problem disappears when I set the rem value to a round value like 13 or 14px. Is there any way to round my expression above?
There is no native css method to round calc, unless you are
using a scss (Sass) there is a library of doing that. Check
here
Alternatively, because it's not a good idea to use calc if you want to have a "Responsive" font size you can use native methods and units like em or vm or vh etc than calc which costs more CPU cycles.
Also, in case you need specific font size in specific screen dimensions you can use CSS Media queries. Here is a good resource
Example for vw & vh:
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
See it in action:
Check this out for further info
Related
I have pixel details (font-size and component width and height in px) for one screen size for example 800x600 screen size. I want to implement an HTML page that can run on different screen sizes. But on the 800x600 screen size, it should fit/have exactly the same given pixel size.
Example:
font-size: 16px -- On 800x600 screen size.
font-size: 24px -- 16px scale to 24px on xxxxxx screen size
I have explored vw, vh but it depends on the container width/height, I need to calculate the px size to vw/vh size.
Also, the size in percentage needs to be converted using pixel size.
Is there something inbuilt in CSS that we can use?
:root {
--font-size-min: 16;
--font-size-max: 24;
--width-min: 800;
--width-max: 1920;
--font-size-delta: calc(var(--font-size-max) - var(--font-size-min));
--font-size-min-px: calc(1px * var(--font-size-min));
--width-delta: calc(var(--width-max) - var(--width-min));
--width-min-px: calc(1px * var(--width-min));
--width-delta-px: calc(1px * var(--width-delta));
--width-lower: calc(100vw - var(--width-min-px));
--width-limit: min(max(var(--width-lower), 0px), var(--width-delta-px));
--scale-ratio: calc(var(--font-size-delta) / var(--width-delta));
--font-size-zero: calc(var(--width-limit) * var(--scale-ratio));
--font-size: calc(var(--font-size-zero) + var(--font-size-min-px));
}
body {
font-size: var(--font-size);
}
This is set up to make the font size 16px at a view width of 800px and a font size of 24px at a view width of 1920px. It is also capped at both ends and scaled in between.
Generally, you need to pick either width or height to match against. The defacto standard is to use width and that's what I've done here.
This does the necessary computations entirely in CSS. --font-size-* and --width-* must be dimensionless units; the remaining variables take care of converting them to px units.
A lot of this can be optimized. I left it like this so that it's clearer as to what's going on.
Note: min() and max() are sort of newish additions to CSS. I know of at least one uncommon browser that they don't work with (though there's an update for it planned Soon™). Those parts could be refactored to use #media instead.
font-size: calc(4rem + 1vw);
I somewhat understand that the calc function makes my font dynamically sized, but
I don't understand how 4rem + 1vw works (what exactly is it doing).
I don't understand how calc interacts or affects 4rem + 1vw
Break it down:
font-size: calc(4rem + 1vw);
1vw
vw is "equal to 1% of the width of the viewport's initial containing block". The browser can calculate that to a pixel value.
4rem
rem is relative to the font size of the HTML element. The browser can calculate that to a pixel value.
So,
calc(4rem + 1vw)
calc adds those values together and sets the font-size property to that value.
Now, I'm saying "pixel value" here, but it could be some intermediate value that has nothing to do with pixels per se, but the idea is the same.
First of all, rem and vw work kinda the same, but not with the same references. You have to see rem and vw as pretty much just other metrics.
rem is based on your root html font-size. Which means that as long as your html has a font-size of, let's say, 16px, 1rem will equal 16px. If at any point, you change your html font-size, all the rem metrics of your css will adapt. It allows for a more uniform render on browsers with different default css values when it has not been set directly by the developer. (For more infos, see reset.css)
So here, as long as you don't change your html font-size, 4rem = 64px.
Now about vw, it works pretty much like we described with rem, but it is based not on a fixed font-size anywhere, but on your window with. Which makes it based on a completely variable data. You can see this variable like this: for a 1000px window, 1px = 0.1vw. So 1vw is 1% of your window width.
So here, if your window width is 1000px, 1vw = 10px.
The calc is literally just adding them: 64px + 10px.
At the end, with your code you will have a fixed 4rem that will always have the same value as long as the html font-size stay the same, and a variable addition of 1vw that will depend on your browser width.
EDIT:
As a last info, because maybe it isn't clear: You don't need calcor the 4rem to make you font-size "responsive". Try with font-size: 1vw and it will also be responsive. Your calc will just make the variation based on your device width a smaller part of your final font-size.
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.
While using foundation framework, I need to make font-size responsive.!The website has two columns 8x4. I have navigation and other links in 8 columns. The height of this block is stable. But, In the 4th column I have description and while opening in the different windows size I am seeing the different height of the description. I want that the height remain constant while changing the size of the screen by increasing the font proportionately.
I have tried media queries and assigned different font percentage for different screen size. 150% for max-width 1500 and font-size: 200% for font-size. But with this other features provided by foundation framework changes. Like paragraph bottom margins
I even tried vh, vw but same problem comes up. Please suggest some way to solve this issue.
Layout of the site
I think article might help you,
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
Or what you can do it start with a layout which supports equal + full height columns. Examples:
Equal Height Columns
Full Height Columns
_
Maybe using vm/wh units...
vw, vh and vmin (Copied from this page)
These new properties allow you to scale font sizes according to the viewport dimensions, i.e.
1vw is 1% of the viewport width
1vh is 1% of the viewport height
1vmin is the smallest of 1vw and 1vh
For example, assume your browser viewport is set to 1,000 x 1,200 pixels:
1.5vw = 15px font size
1.5vh = 18px font size
1.5vmin = min(1.5vw, 1.5vh) = 15px font size
HTH,
-Ted