I'm currently thinking about how to manage my breakpoints. For the moment, i only use the class col-lg-* on my div cause i'm working on desktop and don't need to worry about breakpoint problems for the moment.
But in the future, we'll have to deal with that. So, i was wondering how to do it :
Adding the class col-xs, col-sd, col-md on my div seems a bit tiring ... I guess there are other way of doing it using media queries maybe ?
thanks.
BootStrap col-xs-** is for Extra small devices Phones (<768px) , col-sm-** is for Small devices
Tablets (≥768px) and col-md- is for Medium devices Desktops and for Large devices Desktops (≥1200px) use col-lg-..
so include all four classes, it reduces your effort..
Refer bootstrap website for more...
If use any one of class and then also Bootstrap library will manage to show content in decent way on most of device size.
Extra small devices (phones, up to 480px): No media query since this is the default in Bootstrap
Small devices (tablets, 768px and up): #media (min-width: #screen-sm) { ... }
Medium devices (desktops, 992px and up): #media (min-width: #screen-md) { ... }
Large devices (large desktops, 1200px and up): #media (min-width: #screen-lg) { ... }
Related
I have almost all queries for every phone. (I think atleast)
Example Iphone 6/7/8 (375x667), but uses:
#media only screen and (max-device-width: 640px) and (min-device-width: 360px){
#sidebar {
min-width: 360px;
max-width: 360px;
margin-right: -360px !important;
}
}
My full sidebar responsive media queries:
https://jsfiddle.net/aw5ty84a/6/
Cant add all queries here.
But the problem is the phone uses too small phone resolution or iPhone 5 uses too big resolution queries.
The queries are set by min & max pixel width so the iPhone 6 for example will only pick up the first media query relevant in the code, while ignoring any after (ignoring the correct one).
There may be a way with JS to target by specific device but you can't do so with CSS since the media queries are simply based on min/max pixel width.
You would need to change your width from exact pixels to something like percentages and use a more broad based pixel range like mentioned above.
Ideally you don't want to have a single media query for each phone size. The smallest screen size existent is 320px, so that's the smallest you want.
I like to have around 4 - 6 sizes of media queries, like XL, L, M, S and XS. XL could have max-width 1200px, L max-width 940px, and so on. This will improve your organization and code readability. Each project is different though - sometimes you may not need the XL, but may need a XXS, for instance.
Take the Bootstrap approach to media queries breakpoints as an example. Note that these values are what Bootstrap uses, you can come up with yours to what is most appropriate for your project;
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
If there is a very specific scenario where you find a bug at a specific breakpoint you can add that media query, but if you're coding clean this usually will not happen.
Good luck!
I have seen many different media queries for detecting if the user is using a phone or a desktop. However for many devices now the gap between resolution, ratios and many other things overlaps between high end devices (such as the S8), laptops and low end phones.
My question is, if I want a style sheet for phones, which include all phones and one for desktops, is there a media query to use that is best or should I take a different approach maybe with JavaScript
The landscape and portrait approach works until the soft key board is used and the phone re-considers it as landscape
Examples below no longer work on all devices as they have become out dated.
#media only screen and (orientation : portrait)
#media only screen and (max-device-width: 480px)
#media only screen and (min-aspect-ratio: 13/9)
Not sure if this helps but I usually stick to the breakpoints defined by Bootstrap V4 even if it's not a Bootstrap project. I find that it's a nice range to develop in and more times than not I only have specific styles in the larger breakpoints (as I'm developing for mobile first).
If you only want to use two breakpoints I'd probably suggest < 768px and > 768px but you might have people with varying opinions on that. You'll definitely have edge cases with certain devices.
I just got into the annoying part of CSS, the responsiveness, my big question is
Should I work media queries like this: min-width: xxx to max-width: xxx or simply work with a min-width?
Because I've seen a few sites that whenever you resize the browser or enter from your phone, it won't change from 350px to 600px, it pretty much stays the same unless you go for above 1000px or something...
What's the best standar? or what can you guys recommend me when trying to make it responsive, use exact queries like this: min-width: xxx to max-width: xxx or what?
In most cases, you will find that max-width is usually sufficient, it really depends on how accurate you want to be.
Bootstrap 3.0 has some fundamental media queries in it's CSS and I either recommend using it, or studying it.
As Zanderwar mentions, it depends on how many breakpoints you want to have.
Personally, when I build something simple and I don´t want to use the whole of Bootstrap, I just copy their breakpoints.
Notice that they don't use max-width as the next min-width size will act as breakpoint.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
You can read more about it here.
Also, notice that most CSS frameworks tend to push the idea of mobile-first, designing for little screens first and adapting to tablet and big screens after.
Hope it helps!
Currently bootstrap has breakpoints for their gird system / different size screens set by size in pixels:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
However, with phones now being super high resolution and sometimes having 1080p screens, it displays the tablet or desktop layouts on some phones which is still a bit useless. Is there someway to manage this by looking at pixel density or similar?
You might look into setting Em's instead of pixel based breakpoints since ems are based on the font size, zoom and several other factors to enable the break point.
Well, ultimately, if you’re using pixels it will literally be that strict. For example, say we have a media query that is like so;
#media (max-width: 500px) {
rules here...
}
It will force that 500px as the breakpoint, regardless of the base font size or zoom level. You can imagine how this might be a problem if, for example, your user zooms to a factor of 10, the width of the browser is still going to be the determining factor as a breakpoint, so it might completely ruin your beautifully designed website.
I' am using Bootstrap 3, In the mobile view I would like to apply some CSS to fix up some bugs on mobile view. I have looked to documentations and Google it. I' am can't seem to find any clue on it.
Is it possible?
Just use the appropriate media queries in your CSS, eg
#media (max-width: 767px) {
/* CSS goes here */
}
Bootstrap defines the following widths
Extra small devices (phones, less than 768px)
Small devices (tablets, 768px and up)
Medium devices (desktops, 992px and up)
Large devices (large desktops, 1200px and up)
See http://css-tricks.com/css-media-queries/ for some more information on media queries.
There are also responsive utilities, you can add classes to certain elements to either show or hide them at certain viewport sizes.
.hidden-xs or .visible-xs
http://getbootstrap.com/css/#responsive-utilities
You can use responsive display classes https://getbootstrap.com/docs/4.3/utilities/display/ in Bootstrap 4
So for example, you want to hide a specific element for only phones (in both portrait & landscape mode or xs and sm), you can do
<div class="big_image d-none d-md-block">
</div>
What it does is set display:none by default and makes it visible only from md and above.