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
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.
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'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
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.