Small question, for which I can't find any answer.
Is there a way to do this?
I have 3 elements with different sizes.
One with 30px, other with 22px and other with 16px.
Now, when using a tablet to check this elements, they go off limits since I need to have my container with fixed height.
Is there a way, using media-queries, to decrease their font-size according to device without doing one by one? Like it's 100% in desktop, 80 in tablet, etc..
Thank you very much.
You can use viewport widths and heights in CSS:
.vwHeight {font-size: 5.9vw;}
A preview of the same would be:
(source: css-tricks.com)
More info on Viewport Sized Typography.
You can use vw , vmax , vmin or em here is many CSS Units which can helps you.
for example:-
.block {font-size: 5vw;}
or
.block {font-size: 5vmax;}
you should go with below link and I am sure it will helps you.
URL
Related
We have some application which present text on cell phones. Some of the divs would have styling something like this:
width:150px;
text-align:center;
overflow:hidden;
It occurs to me that it would be nice to determine whether the width of any individual word within that div exceeded the width of its container, at least to alert customer support they should abbeviate it or do a workaround. Is there any way to do that? One idea I had was using PHP to wrap each word in a <span> tag, but I'd prefer something native to the DOM.
It depends what text size you're using? You could always use vw units or em units. Em's are like a percentage of the original, e.g.:
.original{font-size:20px;}
.original.em2{font-size:2em;}/*would be 40px*/
.original.em1{font-size:1em;}/*would be 20px*/
vw units or view point units are also handy. I use them to keep font sizes as a percentage almost
.vw{font-size:5vw;}/*5% width */
Although there may be browser compatibility issues.
Always use a fallback :)
Here's some links:
vw:
http://caniuse.com/#feat=viewport-units
https://css-tricks.com/viewport-sized-typography/
ems:
http://caniuse.com/#feat=input-email-tel-url
I have an h1 I want to fit the entire width of the viewport which consists of 13 characters in a monospaced font. After reading the CSS-Tricks article on viewport sized typography it seems like logically if I want to achieve this I simply have to set my h1's styles to:
h1 {
font-size: 13vw;
font-family: monospace;
}
This however is rendering with a bit of space left over (highlight the text to see the white space):
(There would be an image here but I don't have enough rep so click here for the JSFiddle)
I have tried other sizes, font-size: 14vw; is slightly too big, font-size: 13.99vw; seems just right, but strangely font-size: 13.999vw; is still too big?
Can someone explain what is going on here? Why would each character of a 13 character length string in a monospaced font require more than (100/13)% of the viewport width to fit the entire viewport width?
Before I begin I'm just going to say that I'm not going to give you a workaround due to issues I've raised in comments on Stoyan Dekov's answer. Instead I'm only going to answer your question of Can someone explain what is going on here?
font-size != width
The problem here is that you're assuming font-size is the same thing as width. It isn't. The CSS Fonts Module defines font-size as:
...the desired height of glyphs from the font.
This means that font-size is more comparable to height than it is to width.
This isn't specific to the vw unit, either. If you specify a font-size in pixels you'll also notice that the computed width does not match the font-size.
But even then it all depends on which font-family you're using anyway, as the same paragraph continues to say:
For scalable fonts, the font-size is a scale factor applied to the EM unit of the font. (Note that certain glyphs may bleed outside their EM box.) For non-scalable fonts, the font-size is converted into absolute units and matched against the declared font-size of the font, using the same absolute coordinate space for both of the matched values.
The key words here being scalable and non-scalable.
Even if a non-scalable font was being used though, 13vw would not reflect each character's width. This would never work with vw, but it may work with vh but only if the aspect ratio of each individual character matched the screen's aspect ratio.
The problem is if a text is the exact same size as the parent container, it will span across a second line.
body {
margin: 0;
width:100px
}
h1 {
font-family: monospace;
width:100px;
}
That will cause the text to go onto a new line as they are both 100px. That's why 14vw is too big, but 13.99 is just enough: Fiddle DEMO
However, you can use text-align: justify; to achieve what you want.
Take a look at this Fiddle DEMO.
I have a website 960px in width with little content, when viewed on resolutions over 1400 > there is too much white space. I want to increase font-size on some elements so it fills the empty height on higher resolutions. How can I achieve this without making it responsive?
Thanks.
Media queries are a great option, but you may also want to try using EM or %. Both of these are relative values depending on screen size or PPI. Generally you can start from 0.8em for your <p> tag and go from there.
You can also try to fiddle around with line-heights but I am unsure of how exactly you could differentiate them without media queries.
EXAMPLE
p {
font-size: 0.8em;
line-height:1.2;
}
I am building a responsive page layout and it works great so far, but I have a question:
Should I be using em, px or %?
For example, I want to have border radius applied to an element. Should I use this code:
border-radius: 1.563em;
Or this:
border-radius: 25px;
Should I be using ems for similar properties or should I stick with px?
Generally, don't use px for responsive layouts.
If you use a px-based media query, then your layout may end up looking like crap when the user zooms. And unfortunately, that I know all to well because I made that mistake too.
Regarding your example with border-radius, you may discover the two look really different when the font-size is increased - demo. The first and the third use px for border-radius, while the second and the fourth use em.
But there will be exceptions and if something doesn't feel right on zoom (for example, a box-shadow that looks exaggerated), try it with px as well.
Also check this article.
Just for info, if it helps, it's possible to use rem . It solves the problem of "cascading size" with em. If you set
body { font-size :62.5 %; } /* Trick to have 1em =10px */
li {font-size:1.4em; }
your <li> will be 14px, but if you have a list in a list, the second level <li> will be at 20px, and at third level will be 27px, etc..
With rem ( means "root em" ), all <li> are at the size you define.
More info : http://snook.ca/archives/html_and_css/font-size-with-rem
and http://www.pompage.net/traduction/dimensionner-ses-fontes-avec-rem ( in french )
I have a sidebar DIV on my web page that has buttons. I have the width of the sidebar set as follows:
width: 20%;
but when the browser size is reduce then there's sometime not enough space for the buttons. Is it possible for me to have the width as 20% but also specify a minimum in px?
Yes. This is pretty common, too. Have fun!
And protip: you can always just try and find out ;)
Yes. The W3C CSS recommendation generally does not require that units for different dimensions like width and min-width be the same. (Not quite relevant side note: You can even mix different units for dimensions like padding, e.g. padding: 2px 1em;.)
Using “min width”.
min-width: 20px; for example.
But if you want its width to always be at least the size of whatever is contained, consider using display: table-cell;