I have heard that rem font sizings work best for responsive views. Since rem fonts are based off the html tag. Is that just because there are less places to have to reference in a media query? Essentially, you just change the html font-size in a media query and all your rem references are adjusted based off the new html font size? ...or is that the entirely incorrect reason why people prefer to use them when making responsive views?
example:
html {
font-size: 14px;
}
div {
font-size: 1rem; // equal to 14px;
}
#media only screen and (max-width: 768px) {
html {
font-size: 12px; // so now all `div` would be worth 12px but i don't
// have to manually change `div` font-sizes now
}
}
Related
I'm coding for a responsive website using basic CSS and HTML(without bootstrap).
now I wanna change the size of elements(caption font, picture size, etc) to be set up for size of various devices.
for example I have codes like below:
.footer-link{
font-size: 14px;
width: 80%;
padding-bottom: 20px;}
and want to reduce 10% of sizes by a code to have sth like:
.footer-link{
font-size: 12px;
width: 72%;
padding-bottom: 18px;}
I know about media . but with that I still need to rewrite every single code and size in each media! Actually i want to avoid rewriting by having some especial code that reduces all sizes in a media itself alone.
but I don't have any idea of doing this.
any recommendation please?
you can add #media query in css and add the max width in which the inner code will be vaild. for example:
#media (max-width: 600px) {
.footer-link{
font-size: 12px;
width: 72%;
padding-bottom: 18px;}
}
now only when the device have maximum width of 600px this code will be executed.
Also you can change the size to make it em,rem, vw, vh, % instead of normal px preoperty to make it more dynamic.
you can read more about how to make responsive website from here
Here is an example for a small device:
.footer-link{
font-size: 14px;
width: 80%;
padding-bottom: 20px;
}
#media (min-width: 576px) {
.footer-link{
font-size: 12px;
width: 72%;
padding-bottom: 18px;}
}
to do other sizes you just create a new media query and change the size, bootstrap 4's breakpoints look like this:
xs = Extra small <576px.
sm = Small ≥576px.
md = Medium ≥768px.
lg = Large ≥992px.
xl = Extra large ≥1200px.
Three methods:
ONE:
1) Use the rem scaling measurement
Do NOT use px, instead use the rem scaling measurement. rem is Root em and everything works from this :root value, this hiarachy is critical for step 2:
2) Use #media queries to control the root-em size
Once set, you can run a media query simply controlling the root-em (rem) value for each of your #media queries.
Example:
:root {
font-size: 16px; /* this sets 1rem */
}
.footer-link{
font-size: 0.9rem; /* 16 x 0.9 */
width: 5rem;
padding-bottom: calc(100% - 5rem);
}
#media screen and (max-width:500px){
:root {
/* Everything is magically a bit smaller */
font-size: 14px;
}
}
NOTE: Setting font-size: in the html{ ... } can maybe overwrite the browser font-size setting (unconfirmed by me).
TWO:
Using ONE above but also with CSS Variables for ease of adjustment.
Exampe:
:root {
/* percentage */
--widthValue: 80%;
font-size: 16px; /* this is still needed as sets 1rem */
}
.footer-link{
font-size: 1rem;
width: var(--widthValue);
padding-bottom: calc(100% - var(--widthValue));
}
#media screen and (max-width:500px){
:root {
/* Everything is magically a bit smaller */
font-size: 15px;
--widthValue: 76%;
}
}
This allows you to fine tweak adjustments that can not easily be scoped by rem values. Read more here.
THREE:
There was a third method in my mind when I started writing this answer but I think the two above should between them more than easily cover what you're looking for.
I know about media . but I still need to rewrite every single code and size in each media
Yes, you will need to update your basic CSS as written in your question, but that's inevitable as you're replacing static code with varaible driven code.
The solution I present is Dont Repeat Yourself (huh?) -- you only need to change one value in the #media query and all the styles cascade from that one simple change.
The sample code you provided is not a sample of responsive website. To be responsive we have to redesign and reorder elements. Some elements like images and backgrounds may need to be resized but the fonts, widths and paddings etc. should not be smaller when the screen is smaller. For example if you reduce the width of elements when the window is smaller in a small window you have nothing rather than elements with width:1% !
So I think you need a kind of ZOOM which may be appropraite for games and somethings special.
Besides without using CSS media queries and without rewriting css rules, the only way to zoom everything is JS codes. So I write simple sample to show how you can zoom everything according to the window size.
Please try resizing the window to check the effect:
var myDesignWidth=500; //this is the initial width which you design everything
$(window).on("load resize",function(){
var newZoom=$(window).width() / myDesignWidth;
$("body").css({"zoom":newZoom});
})
.footer-link{
font-size: 14px;
width: 80%;
padding-bottom: 20px;
display:inline-block;
background:url('https://d1o2pwfline4gu.cloudfront.net/m/t/13116/13106367/a-0270.jpg');
background-size:cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="footer-link">This is a footer link with background</a>
Is there a way of setting all font sizes to scale down x amount in a media query, instead of setting font size for each element ( h1, h2, h3 ).
Currently I have a media query that looks like this:
#media only screen and (min-width : 1200px) {
body {
font-size: 20px;
}
}
This, however, doesn't set sizes for headings. Is there any way to include all text on a site? Thanks
Yes, basically you set font size in pixels for a root element like html and then you can use rem units to set font sizes for other elements. In your #media rule you will have to change just font-size property for html element and it will equally affect other elements since they depend on root's font-size because you use rems.
html {
font-size: 12px;
}
p {
font-size: 1.1rem;
}
.footer {
font-size: .9rem;
}
#media (max-width: 767px) {
/* now the basis for all the font sizes set in
rems is 10px. For example, font-size for p is 10*1.1 = 11px.
Previously it was 1.1*12 = 13.2px. */
html {
font-size: 10px;
}
}
div{font-size:15px;}
#media screen and (max-width:1200px) {
div{font-size:20px;}
}
#media screen and (max-width:600px) {
div{font-size:25px;}
}
#media screen and (max-width:320px) {
div{font-size:50px;}
}
<div>test font size</div>
This question already has answers here:
Is is possible to overwrite the browser's default font-size in media queries using EMs?
(2 answers)
Closed 5 years ago.
I'm working in a page that has
html {
font-size: 62.5%;
}
That means 1rem = 10px instead of 1rem = 16px So far, so good.
The problem is that it doesn't affect #media queries.
/*
it should change at 600px and not 960px.
the #media ignores the 62.5%;
*/
#media (min-width: 60rem) {
.el {
background: blue;
}
}
Check this codepen to see the issue.
http://codepen.io/sandrina-p/pen/bqGZjE
I tested on a retina monitor, with Chrome and Firefox. On Safari the issue doesn't happen.
Any solution?
I found the issue.
In #media you need to use em and it will always read the default browser size, ignoring your custom font-size. The same doesn't happen with rem.
So in this case, you need to set 37.5em (600/16), and it will change the at 600px in every browser including safari.
https://zellwk.com/blog/media-query-units/
(...) the only unit that performed consistently across all four browsers is em. There aren’t any differences between em and rem with the exception of bugs found on Safari.
(...) Unfortunately, px media queries remained at 400px in the third experiment, which makes it a no-go if you intend to support users who change their browser’s font-size value.
Hence, my conclusion after these experiments is: Use em media queries.
#media screen and (max-width: 37.5em) {
.el {
background: blue;
}
}
No. It doesn't have to do anything with you html font-size or your .el font-size. Because 1rem is 16px. So you have to calculate it as per 16px.
#media (min-width: 37.5rem) {
.el {
background: blue;
}
}
This would be your 600px media queries breaks.
Try this
<div class="el">
hey there
</div>
// =========== basic template =========== //
$safeArea: 1rem;
body {
font-family: sans-serif;
}
// ======== actual codepen code ========= //
html {
font-size: 62.5%;
}
.el {
background: red;
font-size: 1.6rem;
}
/* it should change at 600 px and not 960px.
the #media ignores the 62.5%;
*/
#media screen and (max-width: 60rem) {
.el {
background: blue;
}
}
see this codepen - http://codepen.io/anon/pen/aJbxOQ
So I've started using Boostrapp and imideately i tried it on my large screen and it looks like it's zoomed out. On tablet and lap top it's fine resolution 1280 but on 1960 it's just zoomed out.
Before using boottrap i solved this problem with em units and just making font size larger for example 105% for media screen 1600, 110% for media screen 1900. And all my buttons, forms, headers adjust. But that doesn't work in bootstrap.
So my question is how do people handle large screens with bootstrap without writing 1000 lines of code for each screen size.
Use the grid system to your advantage
https://getbootstrap.com/examples/grid/
Here's how they do it: they make your own media queries on top of any frameworks they may have.
You can view my website as an example: calumchilds.com. I use the vw measurements, which means once the screen width exceeds a certain width (on my site, I set it to 2100px - the code is at the end of the answer if you are interested), the text sizes are based on the viewport width, using the measurement vw. For example, my <h2> is normally 32px on a normal-sized screen, but on large screens, the text size is 4vw. You can use the vw measurement for buttons, forms, whatever.
Just experiment with the sizes using either your own screen or Google Chrome Dev Tools (I used the latter.) If you have any questions, feel free to comment below.
#media screen and (min-width: 2100px) {
h1 {
font-size: 5vw !important;
}
h2 {
font-size: 4vw !important;
}
h3 {
font-size: 3vw !important;
}
h4 {
font-size: 2vw !important;
}
h5 {
font-size: 1vw !important;
}
h6 {
font-size: 0.5vw !important;
}
body, p, button, .button, .topnav a, label, input, textarea, .socialmediaprofiles a, .social-media {
font-size: 1.75vw !important;
}
.topnav a {
padding: 16% 32%;
}
button, .button {
padding: 0.5em 1em !important;
border-width: 0.2vw !important;
}
}
Bootstrap already added media queries inside the library. To get it work follow the bootstrap guide. Like use the proper grid class for each container (col-lg-12, col-md-12, col-sm-12). For each UI elements Bootstrap has proper style class. For any change if you want to modify anything, try to create some file like bootstrap.override.css to override the css class or styles. Finally better to start with reading the bootstrap guideline.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am using rems to specify the breakpoints in media queries as follows
#media screen and (min-width: 30rem) {}
If the base font size is not defined in body {} it will inherit the browser default font size. I'v heard using rems is a best practice. My question is if user changes the browser default font size then media query will not target the expected screen size.
eg:
30rem (width of view port) = 480px (targeted viewport) / 16px (browser default)
and user changes font size to 14px then
34rem (width of view port) = 480px (targeted viewport) / 14px (user changed)
as a solution the font size can be defined in the body tag. But again that is similar to specifying the view port size in pixels and what makes rems better than pixels.
You are correct that if the base font size is 16px, then
#media screen and (min-width: 30rem) {}
and
#media screen and (min-width: 480px) {}
will both give the same results.
If you zoom in with your browser they will also give the same result.
As you point out though, if a user resets their browser font size then the 2 media queries give different results.
There's a good pen on Codepen to illustrate this.
Note that in this pen, if you set your browser font size larger or smaller than 16px the green em based box is either smaller or larger than your viewport, so this wouldn't be ideal in responsive design.
So I think px vs rem in the media query depends partly on your personal preference and partly on the specifics of your design.
FWIW, one easy option for responsive design is to use px in the media query and rems (or ems) for the styling, e.g.
/* Document level adjustments */
html {
font-size: 17px;
}
#media (max-width: 900px) {
html { font-size: 15px; }
}
#media (max-width: 400px) {
html { font-size: 13px; }
}
/* Modules will scale with document */
.header {
font-size: 1.5rem;
}
.footer {
font-size: 0.75rem;
}
.sidebar {
font-size: 0.85rem;
}
/* Type will scale with modules */
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 2em;
}
source: https://css-tricks.com/rems-ems/