I've seen various media queries designed to determinate the layout, but lately i been seeing people find the screen size using em.
Is this better, and why?
Use em to make scalable style sheets. em is a relative measurement of your browser same as percentage unit.
Example
body {
font-size: 81.25%;
}
#media screen and (min-width: 68em) and (min-height: 53em) {
body {
font-size: 87.5%;
}
}
#media screen and (min-width: 75em) and (min-height: 57em) {
body {
font-size: 93.75%;
}
}
#media screen and (min-width: 80em) and (min-height: 62em) {
body {
font-size: 100%;
}
}
EM units and then changing body’s font-size when viewport height grows above certain point. you read this to clear idea how em does work. hope this help you!
Related
If em/% values are used in an non-bootstrap layout they are responsive in bootstrap no matter what text size remains the same and when vw are used they are responsive. What is the reason for this how to make it responsive without media queries.
The .lead class from Bootstrap uses Media Queries so that depending on what the device's screen width is, the font-size property will be a different value
/*---------------------
Media Queries
---------------------*/
/* Desktops */
#media only screen and (min-width: 993px) {
.lead {
font-size: 3.5em;
}
}
/* Tablets */
#media only screen and (min-width: 769px) and (max-width: 992px) {
.lead {
font-size: 3em;
}
}
/* Smartphones Landscape & Portrait */
#media only screen and (max-width: 768px) {
.lead {
font-size: 2em;
}
}
/* Smartphones Portrait */
#media only screen and (max-width: 540px) {
.lead {
font-size: 1em;
}
}
Changing the size of fonts depending on the size of the screen, is one of the most common things that I find myself doing with Media Queries
Sorry, I understood in any given document when percentages are used they are only responsive for padding, margin and other things and text are always unresponsive and they must be changed according to media queries.
Ems are always unresponsive even with padding and margin.
Im working on a mobile first site. The media queries are set with ems like so:
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
}
#media (min-width: 320em) {
}
#media (min-width: 600em) {
}
#media (min-width: 770em) {
}
I now need to add a max-width media query just below the same breakpoint as my middle media query, so that any screen size is either one or the other.
If I was working with px this would be easy:
#media (max-width: 599px) {
}
#media (min-width: 600px) {
}
Can the same be done with ems? Just to reiterate, I need it so any screen size will be in either the min or max media query. I cant have any 'no mans land' in between.
As its possible to have decimal places on ems I think the following wont work. A screen could be 599.5ems wide as so be in between the 2 media queries.
#media (max-width: 599em) {
}
#media (min-width: 600em) {
}
I've built a few sites with both min and max width media queries, and for me they've been painfully difficult to maintain and didn't actually add any value.
I like to use min-width queries for mobile-first sites, because it makes sense to me to think about my design from my smallest screen width first and then slowly add or change features as the width increases. This has the added bonus of eliminating the "no man's land" issue. See example: (thanks #IMI for calculating the pixel widths)
When you build a site like this, you end up specifying everything that changes from the previous query in each subsequent query, but behavior is also much more predictable as your screen will either fall into one category or the other, and whichever one it falls in, you know exactly what properties are being applied.
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
color:black;
}
#media (min-width: 20em) { /* = 320px */
body {color:red;}
}
#media (min-width: 30em) { /* = 480px */
body {color:green;}
}
#media (min-width: 37.5em) { /* = 600px */
body {color:pink;}
}
#media (min-width: 48.125em) { /* = 770px */
body {color:cyan;}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p> This is some random text.</p>
</body>
</html>
Yes, you can use decimals in your em based media queries.
The em values of the media queries will be based on the Browser's "initial" font-size value. This is typically 16px. So you are usually safe calculating your em based media queries by dividing the pixel value by 16.
Example: to get the em equivalent of #media (min-width: 600px) you would divide 600px by 16 which would result in 37.5 and a media query of #media (min-width: 37.5em)
No Man's Land:
If you have to mix min-width and max-width media queries it is best to use a max-width media query that equals the min-width of your next media query as stated in #maioman's answer and that should get rid of the "no man's land" gap problem. That way, a device with a max of 600px will use all your styles up to and including the max-width:37.5em styles while devices with have a higher resolution will use the following relevant styles including the min-width:37.5em.
Snippet Example of em based media queries with decimals:
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
color:black;
}
#media (min-width: 20em) { /* = 320px */
body {color:red;} /* You wont see this color since the max-width media query is overrides it */
}
#media (max-width: 37.4375em) { /* = 599px */
body {color:green;} /* Be careful where you place the max-width media query. It will override the smaller min-width if placed after. */
}
#media (max-width: 37.5em) { /* = 600px */
body {color:green;} /* As stated in #maioman's answer, using a max-width that equals the min-width of your next media query should get rid of the "no man's land" problem. */
}
#media (min-width: 37.5em) { /* = 600px */
body {color:pink;}
}
#media (min-width: 48.125em) { /* = 770px */
body {color:cyan;}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p> This is some random text.</p>
</body>
</html>
since min-width will override max-width if you do something like this you should be safe:
#media screen and (max-width: 600em) {
}
#media screen and (min-width: 600em) {
}
div {
width:5em;
height:5em;
}
#media screen and (max-width: 12em) {
div {
background:green
}
}
#media screen and (min-width: 12em) {
div {
background:red
}
}
<div>test</div>
fiddle
The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12px, 1em is equal to 12px. Ems are scalable in nature, so 2em would equal 24px, .5em would equal 6px, etc.
The size can be calculated from pixels to em using this formula: pixels/12(current font-size)=em
Check out http://www.w3schools.com/css/css_font.asp
In media queries “rem” as well as “em” don’t refer to the root element (html) but to the browser defaults directly which can only be changed using the browser settings for base font size. This means that even if you specify a font size of 30px on your html element, media queries will still use "user agent's (browser's) initial font-size" as “em” / “rem” based for the media queries unless you also change your default font size in the browser settings.
I will use(for the good of math):
"user agent's initial font-size" = 10px;
So let say you have:
#media (max-width: 59em) {
}
#media (min-width: 60em) {
}
When the browser compute the em that will be equal to:
#media (max-width: 590px) { // 59 * 10(supposed font-size)
}
#media (min-width: 600px) { // 60 * 10(supposed font-size)
}
Here you have a range of 10px where the screen could between the 2 media queries.
Probably you would say, I do a little math and solve the problem but to do math in css there is calc
like this:
#media (max-width: calc(60em - 1px);) { // 60 * 10 = 600px - 1px = 599px
}
#media (min-width: 60em) { // 60 * 10 = 600px
}
But unfortunately calc() not working within media queries.
But 1px = 0.1em 1 / 10(supposed font-size)
So you have to do the math a priori:
#media (max-width: calc(59.9em);) { // 60em - 0.1em(1px) = 59.9 * 10 = 599px
}
#media (min-width: 60em) { // 60 * 10 = 600px
}
So the only that you have to do is change the "10" to the "user agent's (browser's) initial font-size" and do the math a priori.
I hope this help you.
I have used the following css code to decrease the font size of a slider heading:
.swiper-slide .content h2 {
font-size:48px;
}
It seems to have worked fine when viewed from a desk or laptop, but the text is over sized when viewed on a smart phone.
I am using windows 7 on a PC, wordpress CMS, responsive theme...
Using font-size in % should help you to change size relatively. But you should keep in mind line-height property.
You could try media queries?
html { font-size: 62.5%; }
body { font-size: 1em;}
#media (max-width: 300px) {
html { font-size: 70%; }
}
#media (min-width: 500px) {
html { font-size: 80%; }
}
#media (min-width: 700px) {
html { font-size: 120%; }
}
#media (min-width: 1200px) {
html { font-size: 200%; }
}
Try this :) http://jsfiddle.net/yv5eu/
Try this technique for better resizing of text. Than with media queries you can set different font sizes.
http://snook.ca/archives/html_and_css/font-size-with-rem
http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/
Support: http://ahedg.es/w/rem.html
I have a problem with a media query in 320px width.. in my general css for standard web resolutions I have this:
body {
background-image:url(../Images/FondoSL.png);
font-family: 'Open Sans', sans-serif;
font-size:1em;
}
.headerPartOne p{
font-size:0.94em;
color:#676767;
margin-left:30px;
margin-top:5px;
margin-bottom:0;
}
.contentContentPage fieldset ul li span {
font-style:italic;
font-size:0.98em;
margin-left:35px;
}
and in the media query 320px this:
#media only screen and (min-width: 320px) {
body {
font-size:0.7em;
}
.headerPartOne p{
font-size:0.74em;
color:#676767;
}
.contentContentPage fieldset ul li span {
font-style:italic;
font-size:0.48em;
}
}
also i have another media query for web and mobile screen resolutions
#media only screen and (min-width: 600px) and (max-width: 800px)
#media only screen and (min-width: 533px) and (max-width: 853px)
#media only screen and (min-width:1920px)
these media queries work fine.
well my problem is that the query 320px's style is applied to all resolutions, this means that if I run a query to a larger average resolution keeps the styles in 320px media query .. why is this? with other query I do not feel the same, each applies the style I want. (if I not put the 320px media query)
sorry for my english.. thanks
Lets take this one css rule as an example.
Lets remember, that CSS stands for Cascading Style Sheets. So the rules at the bottom of the sheet overwrite any rules that came before it.
So if you have
body {
font-size: 1em;
}
on line 25 of your css style sheet.
and have
#media only screen and (min-width: 320px) {
body {
font-size:0.7em;
}
}
on line 114 of your css style sheet.
The font-size will be 0.7em, since it overwrote the previous style.
Lets say instead of that #media query you did this instead
#media only screen and (max-width: 320px) { /* notice the max-width instead of min-width */
body {
font-size:0.7em;
}
}
The font-size will then appear as 1em on regular screens, (any screen above 320px).
This will apply to styles below 320px
#media (max-width:320px) {
/* styles here */
}
(min-width: 320px) means every resolution greater than 320px in width.
If you want only screens of 320px or less to receive these rules, you need to use (max-width: SIZE) where SIZE is whatever the biggest screen is you want it to be applied to.
Using LESS is there a way I can set a base font-size and then reference it later and output it say 1em smaller? Ex:
#font-size: 3.025em;
And then in a media query or something:
#media only screen and (max-width: 959px) {
.box {
font-size: #font-size - 1em;
}
}
I tried googling this but wasn't coming up with anything.
Yes, you can. You must set the baseline font size as LESS won't be able to infer what the default is:
#font-size: 3.025em;
And then in a media query:
#media only screen and (max-width: 959px) {
.box {
font-size: #font-size - 1em;
}
}
;)