I've created a responsive site and want to use em's to control the font size.
I've set the body font base size to 64.5% as recommended to create a base of 10px.
However, though the sizing seems OK, it does not change with the size of the browser. What am I missing?
http://jsfiddle.net/XaUz9/
See if this helps you: http://jsfiddle.net/panchroma/qK8j2/
In your example, you have explicity set the font sizes and there's nothing instructing the fonts to scale as the viewpont changes.
Setting
body{ font-size:62.5%; }
simply sets the font size (relative to the browsers default setting), it won't result in any scaling.
A couple of ways you achieve what you want is to either set sizes for h1, h2, p etc as the viepoint changes using #media queries , eg
#media (max-width: 480px) {
h1 {font-size: 2em }
h2 {font-size: 1em}
p{font-size:1em}
}
or you could set a default body font size at different viewpoints and the font sizes will scale relative to the setings you have at the head of your CSS file, eg
#media (min-width:481px) and (max-width: 767px) {
body{
font-size:90%;
}
}
Related
When using rem units in Google Chrome (or firefox), the result is unexpected. I'v set up a page with the root font-size set to 10px to make it easier the translate a pixel based design to html/css.
This is my css. My expectation would be a page with one 500px wide box and if the screen is wider than 500px the background should turn red.
html {
font-size: 10px;
}
#media screen and (min-width: 50rem){
body{
background-color: red;
}
}
.test{
width: 50rem;
background: black;
height:100px;
}
But, despite both values being defined as 50rem, the results is a 500px wide box with the page turning red at 800px.
https://jsfiddle.net/tstruyf/puqpwpfj/4/
What am I doing wrong or why is this?
It's meant to work like this, it's just a little confusing if you don't know what's going on.
If you're not using rem in media query declarations then they are based off the root html base font size. If you don't declare this, then in most modern web browsers it's 16px.
As you have declared it as 10px a rem will be 10px throughout your code. Unlike em units, where it is based on the closest parent declaration size.
The confusion comes in that media queries declarations do not base themselves on the declared font-size that you apply to html and instead always use the default size - which as I said is 16px in pretty much all browsers.
That's why 50rem is coming out as 800px - 16px * 50.
Note, this is only for the declaration of the media query breakpoint, if you assign something to be 1rem tall inside the media query, then it will base itself on the base html size.
html {
font-size: 10px;
}
#media screen and (min-width: 50rem){ // 800px (uses base font-size)
div.somediv {
width: 50rem; // 500px (uses the declared html font-size)
}
}
You're not doing anything wrong, this is how rem in media queries are meant to work. As per the spec:
Relative units in media queries are based on the initial value, which
means that units are never based on results of declarations. For
example, in HTML, the em unit is relative to the initial value of
font-size, defined by the user agent or the user’s preferences, not
any styling on the page.
So any styling you apply to the base font size doesn't have an effect on the media query calculation.
Here's the relevant part of the spec.
If you really want to use rem and have them use a font-size basis of 10px, you could always write a SASS mixin to do the conversion for you. Other than that, it might be less confusing to stick with px for media queries.
The size of 1rem in media queries is not affected by changes to the base font size. But you could calculate the correct breakpoint yourselves. You can calculate the breakpoint in pixels based on your new base font size and the desired size in rems.
pixels = desired-rem-value * current-base-font-size
For example for a base font size of 18px and a breakpoint at 20 "rem":
20 * 18px = 360px
There are a few options how to calculate the pixel value:
1. calculate by hand:
html {
font-size: 18px;
}
/* For a breakpoint at 20 times your base font size*/
#media(min-width: 360px) {
...
}
2. Use calc():
#media(min-width: calc(20 * 18px)) {
...
}
3. Use a CSS prepocessor function:
(For example in scss or something similar.)
$base-font-size: 18px;
html {
font-size: $base-font-size;
}
#function media-rem($rem) {
#return $rem * $base-font-size; // $rem must be unitless
}
#media(min-width: media-rem(20)) {
...
}
Based on the rem CSS Specification:
When used outside the context of an element (such as in media
queries), these units refer to the computed font metrics corresponding
to the initial values of the font property.
So, in this case, which media query, rem refers to the initial values of the font property (Default browser's font-size = 16px).
Let's say that I have default font size set to 16px (this should be redundant since it's default in most browsers):
For brevity, my site contains some box with size 10em x 10em.
body, html
{
font-size: 16px;
}
.box {
border: 1px green solid;
background-color:green;
width:10em;
height:10em;
}
My site is already responsive with min-width media queries for specific breakpoints targetted at em values (36, 62 and 85em).
The only thing my site does is change width and color of the box.
#media (min-width:36em) {
.box {
width: 36em;
border:1px red solid;
background-color:red;
}
}
#media (min-width:62em) {
.box {
width: 62em;
border:1px blue solid;
background-color:blue;
}
}
#media (min-width:85em) {
.box {
width: 85em;
border:1px orange solid;
background-color:orange;
}
}
Now let's say that I have some device with resolution 1440x900 where browsers decide that the device's pixel density is 2dppx by default. As result, everything looks much bigger than it should be. And I don't like it.
But the solution should be easy, right? Just add a media query at start for 2dppx pixel density and since it's twice as much pixels, I just reduce the font size by half...that should work, right?
And since I use "em" on everything then by changing the font-size by half I automatically reduce size of everything "em"-sized by half...right?
#media ( min-resolution: 2dppx) {
body, html {
font-size: 50%;
}
}
relevant jsFiddle
Well I found it does not work as I thought it would...I tried to google answers but did not find anything relevant, I suspect I misunderstand how font-sizes, ems and pixel density works...
Reducing font-size by 50% reduces the font-size by much more than by half. The original size is 16px but font-size: 50%; results in a font much smaller than font-size:8px ... Tested in Firefox and Chrome. Does anyone know why is that?
When I set font-size:8px; in the media query for 2dppx then media queries for min-width:36em, 62em and 85em do not trigger as I would have expected, at least when I change layout.css.devPixelsPerPx in Firefox. The min-width in media query behaves like the font-size is still at 16px eventhough it's changed with the dppx media query. Tested in Firefox and Chrome. Does anyone know why is that?
UPDATE
Looks like media queries are loaded in 1dppx context, it does not matter if you use "em", it seems they are cached on load and values such as min-width are fixed to the first value and eventhough you change the base font-size in different media query, other queries don't refresh.
The only solution I can think of right now is to multiply all media queries. One media query for px value in 1 dppx context and another media query for px value in 2 dppx context (which is 50% of the first value).
Thanks to Mr Lister in comments, I found out that this:
#media ( min-resolution: 2dppx) {
body, html {
font-size: 50%;
}
}
...is not what I intended to do. The 50% rule works for <html> tag AND for <body> tag. The resulting font size is not 8px in body, but 4px, because 50% in html is 8px and another 50% in nested body tag results in 4px.
What I intended to do was this:
#media ( min-resolution: 2dppx) {
html {
font-size: 50%;
}
}
Font-size issue is solved.
For the media query: I found out that sizes in #media queries ignore pixel density but sizes in the CSS rule body do not. Since I use "em" sizes and SASS, I can simply replace all #media queries with this mixin (example with 2dppx):
#mixin media-min-width($min-width) {
#media(min-width:$min-width), (min-width: $min-width / 2) and (min-resolution: 2dppx) {
#content;
}
}
I'm a bit lost with CSS handling in order to manage stylesheet about screen size. I'm developing a Django website project and I'm confronting to a very delicate situation.
My project is developped on a very good screen (Retina screen) with a very high resolution. But, when I'm watching my project on a very bad screen resolution, some elements are not situated where it should be.
I put for example part from a .css file corresponding to HTML base template :
/* ############################################# */
/* CSS File about Home application properties */
/* ############################################# */
#import url("http://bootswatch.com/flatly/bootstrap.min.css");
/* If screen less than 1440px */
#media screen and (max-width: 1440px) {
.navbar-right {
/*padding-left: 250px;*/
position:absolute;
right:2%;
}
}
/* If screen bigger than 1440px */
#media screen and (min-width: 1450px) {
.navbar-right {
/*padding-left: 400px;*/
position:absolute;
right:2%;
}
}
/* Define background color from upper navbar */
.navbar-inverse {
background-color: #007A5E !important;
}
/* DatasystemsEC tab */
.navbar-inverse .container-fluid .navbar-header .navbar-brand {
color : white;
}
/* Tab properties from navbar */
.navbar .nav > li > a {
color: white;
}
footer {
text-align: center;
margin-top: 35%;
}
How I can handle CSS stylesheet in order to adapt the file to screens resolution ?
Can you tell me what is right or wrong in following ideas :
I have to write only % and not px in order to take account screen resolution
I have to write CSS file firstly for screen resolution between a and b, then between b and c, ...
For example, the main content in my Django website corresponding to the class = "col-sm-8". I added margin-top = -68% in order to situate the content exactly where I want. But with my friend's screen, the same block is not where it should be.
I'm really new with CSS (and Django too) because I'm learning at the same time I'm coding in order to realize my project.
Thank you if you could help me on this subject.
Current consensus is to approach web development "mobile first". That means start from the smallest screen size and work up to the largest. Bootstrap does exactly that.
In order to decide what are the best suited media queries for your project see this tutorial and this documentation on MDN. Since you are using Bootstrap, I would suggest following the same breakpoins to avoid inconsistencies.
Also, consider using vw and vh instead of percents, when appropriate (I believe this might be part of that margin-top problem). Percents are relative to a container's dimensions. vw and vh are relative to the width and height of the viewport (see in MDN).
I'm fiddling around with CSS on our website.
My understanding is that EM is based on document size.
So I can set that by setting the font-size of the HTML tag, right?
If I define all of our font-size's in EM:
h2 { font-size:1.2em ;}
h3 { font-size: .975em;}
h4 { font-size: .75em;}
When I change the html {font-size: .5em} they all change as i'd expect.
So, all of the above basically get sized down by 50% when the html tag gets changed by an #media query.
#media screen and (max-width: 400px) {
.aphasia1rightbar {padding-left:0px}
.homepage-url-field {display:none}
html {
font-size: .5em;}
}
But, I'm no CSS wizard, despite my LinkedIn profile to the contrary.
Am I missing something?
Anything wrong with this approach?
I am making a responsive HTML email. When I open it on a mobile device (e.g. iPhone), the layout is responsive, but the fonts are tiny.
The only solution seems to be redeclare the fonts in a media query at a bigger size. Getting the right size takes a lot of trial and error.
Obviously, having two sets of font declarations is inefficient to maintain so I want to use SCSS to streamline it.
This is what I have at the moment:
h1 {
font-size: 28px;
line-height: 36px;
}
h2 {
font-size: 14px;
line-height: 18px;
}
#media only screen and (max-device-width: 615px) {
$increase: 8px;
h1 {
font-size: 28px + $increase;
line-height: 36px + $increase;
}
h2 {
font-size: 14px + $increase;
line-height: 18px + $increase;
}
}
This is good as I can just alter the $increase value to make my mobile fonts bigger. However, I have over 20 font declarations (for different emails), so if I update the desktop sizes (e.g. change h1 from 28px to 32px), I then have to update mobile declaration, which is time consuming.
Is there any way I can use SASS to have one set of font declarations and then automatically have the mobile versions increase in size (while still having the flexibility to do some custom overrides if the $increase value isn't suitable for a particular style).
Steps I have tried to overcome the problem:
1. Using Rem/Ems:
These don't seem to be supported by all Desktop browsers. Using PX seems to be the only way to get the size right.
2. Using Scale meta tag:
e.g. <meta name="viewport" content="width=device-width">
This causes some mobile browsers to display a white screen (Blackberry)
You can use rems! Use the font-size:62.5%; trick on your html element first, and then you can set up several media queries just to resize the rems.
#media only screen and (min-width: 385px) {
html{font-size:68%;}
}
#media only screen and (max-width: 370px) {
html{font-size:62.5%;}
}
#media only screen and (max-width: 350px) {
html{font-size:61%;}
}
#media only screen and (max-width: 330px) {
html{font-size:59%;}
}
And for the desktop clients that don't support rems you can just put your px definitions first in the inline css (or style tag):
font-size:14px;
line-height:16px;
font-size:1.4rem;
line-height:1.6rem;
I'm currently working on a way to get SASS mixin to copy the px values and convert them to rems, but it's tricky because of the decimal point. If i finish i'll post a comment! Or if you beat me to it please let me know ;)
The only thing you can really do is use extends, and I caution you to use them sparingly as they can really bulk up your CSS:
%size-1 {
font-size: 1.1em;
}
%size-2 {
font-size: 1em;
}
#media (min-width: 30em) {
%size-1 {
font-size: 1.2em;
}
%size-2 {
font-size: 1.1em;
}
}
h1 {
#extend %size-1;
}
h2 {
#extend %size-2;
}
You should not need to modify your line-height every time you change the font-size if you specify it without units (eg. line-height: 1.5).