I want to display 12 column table without scrollbar in smaller screens. Table should shrink to the device width. How can i achieve it ?
You will be aware of various units of measurement in CSS such as px, em, rem, pt etc.
A more recent innovation in CSS units of measurement (since around 2011) are viewport units:
vw - 1% of the width of the browser viewport
vh - 1% of the height of the browser viewport
vmax - whichever is the greater, vw or vh
vmin - whichever is the lesser, vw or vh
Consequently if you style your table with:
table {
width: 95vw;
max-width: 95vw;
}
your table will always be 95% of the width of the browser viewport, no matter how wide or how narrow that viewport happens to be.
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'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
I have a site which contains a header image that I want to fit 70% of the screen height on all screens and on the remaining space I want to print some text.
Should I use javascript or should I use media-queries?
Where can I find the standard height parameters for which I have to write the media queries? I found the standard resolutions based on width here.
There is a vh that will work for you. 1vh equals to 1% of browsers viewport. So if you set header{height:70vh;} it will use 70% of what user can see.
Additional relative lengths:
There are more relative lengths than just vh. There is:
vh - Relative to 1% of the height of the viewport
vw - Relative to 1% of the width of the viewport
vmin - Relative to 1% of viewport's smaller dimension
vmax - Relative to 1% of viewport's larger dimension
These lengths are supported by all browsers, https://caniuse.com/#feat=viewport-units.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/length
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