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.
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!
body{
max-width:1366px;
margin:0 auto;
}
My website is 1366px max width.
My phone (two years old) is 1920 x 1080.
Phones of my friends are simmilar - 960px width and higher.
I cannot find any phone on my environment with smaller resolution.
On the other side, Google has its Chrome module for responsive checking (console and click on mobile icon) with widths like 360 - 375 - 412 - 414 - 768px.
Simmilar sitation is on many web sites for that purpose - for example - https://www.responsinator.com/
My dillemma is - do I need to change any on my website?
It suits very fine on 960px without any intervention.
Could I just ignore the Google's widths smaller then 960px?
Is there any real possibility that in today's world someone has a phone with 360 px width?
Any suggestion?
If you want to support maximum device compatibility you can try following media query
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
It really depends on your target. Check out this page for one set of data on screen resolutions out in the wild. Also understand that you and your friends are probably a bit of a skewed sample when it comes to mobile devices, and a flagship or even mid-range device from 2 years ago is still way ahead of low end devices being sold today.
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!
I need to do a respponsive website project and Im with some doubts.
Im studying media queries but there are a lot of media queries, there are something like "default media queries" or "common media queries" that we can follow?
After some research Im thinking something about this:
#media only screen and (min-width: 480px) { ... }
#media only screen and (min-width: 600px) { ... }
#media only screen and (min-width: 768px) { ... }
#media only screen and (min-width: 992px) { ... }
#media only screen and (min-width: 1382px) { ... }
Do you think that are a good approach using this media queries?
And do for responsiv design do you think its better use percentages in css or its better using pixels? Im asking this, because the media queries use pixels, so maybe its better dont use percentages?
And for last, I have a computer with full hd resolution and other with 1024 resolution. I have a image that have 300 pixels, in my full hd monitor the image is more smaller than my 1024 computer. I dont understand this, because 300pixels should be 300 pixels always no?
Sorry if I ask many things, but Im with some doubts and its not easy find good and reliable information about this!
I thnk using the media query settings you note will complicate your life because they will make it difficult to target different viewports or window widths.
#media only screen and (min-width: 480px) { ... } will target all widths 480px and above,
#media only screen and (min-width: 600px) { ... } will target all widths 600px and above.
So they will both be fighting for control whenever the viewport is 600px or higher. You could consider something like the following:
/* your default, site-wide settings followed by */
#media only screen and (max-width: 480px) { ... }
#media only screen and (min-width: 481px) and (max-width: 600px) { ... }
#media only screen and (min-width: 601px) and (max-width: 768px) { ... }
#media only screen and (min-width: 769px) and (max-width: 992px) { ... }
#media only screen and (min-width: 993px) { ... }
I'm not saying that these are perfect break points, that's often specific to your design. The important bit is the technique you use to target the different viewports.
There are different schools of thought for pixels vs percentages, and both have advantages. If you are getting up-to-speed with responsive design, personally I think it's worth spending time with some of the well established frameworks like Bootstrap or Foundation or Skeleton or one of the many others.
They are all fantastic, they will save you heaps of learning time, give you good cross-browser results, and the more you know, the easier it will be to break away from them when needed.
Good luck!
What's pixel density and how it can help me to understand why the same image can be smaller on my mobile phone than it is on my computer monitor (and vice-versa)?
Let's say that I have a monitor with a 500 x 500 pixels resolution, the screen size of this monitor is 15" diagonally and I have a mobile phone that has the same resolution but it's screen size is 4" diagonally (just an example).
How is it possible to fit the same number of pixels in different screen sizes?
The answer is simple: The pixel is smaller on my phone than it is on my monitor (that's the big difference between Apple's retina display and other displays).
Media Queries...
Take a look in a very simple blog that I've developed last year. Try resizing your browser width to see what happens to the content, images and slideshow.
When the browser/screen width is smaller than 800 pixels, the entire site changes to adapt itself better to smaller screens. This is how I think you should use media queries, instead of creating rules for each device screen size (but not necessarily using 800px nor limiting the content max-width when it's on a big screen).
Note that this is just an example on how you should think about media queries.
here is some reference for you:
about media queries you can read http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/ - i love this quote
Start with the small screen first, then expand until it looks like
shit. Time for a breakpoint! -Stephen Hay
basically you should use a fluid layout (you can choose from a variety of css fluid grids you find online) and test your design enlarging and shrinking your browser: when your design "cracks", it's time to add a mediaquery. you don't have readapt the whole website at a certain breakpoint: everything may work ok and you need only to resize the text at that certain width. do so.
about pixel density and resolutionyou can read this useful article: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
hope this helps
You should probably stop thinking about the web in pixels and screen sizes.
I can see why it's tempting to use actual device widths as breakpoints for a design, but do keep in mind that those breakpoints will be invalid the very second a new device is released. Or when the user interacts with the site in an unexpected way, such as resizing the text size to their preference.
Use the em unit for your breakpoints. This way, your media queries will trigger correctly even when a user resizes the text size.
Adjust your breakpoints to when your content/layout needs it, not for for specific screen sizes (that said, you should probably not include compact (mobile) navigation above 980-ish pixels, since people with old monitors probably won't understand how to navigate through it).
Write mobile first CSS, as in use min-width for your media queries. This helps you keep your CSS DRY. However that does not mean that you never should use max-width for media queries - there are always scenarios when you want to add styles to smaller screens only. Always avoid repetition.
For your own sanity, use a CSS preprocessor such as SASS, LESS or Stylus. I recently wrote an answer on how to use SASS to get a really comfortable workflow with media queries, click here here to read it.
Pixel density is a complicated topic, but rendered pixels (such as an image, or anything with CSS) aren't the same as actual pixels on a screen - they're normalized to a standard. For that reason, you shouldn't use pixel density to increase the quality of images, you should just increase the width of the image since those additional pixels then will be crammed into place on higher resolution screens.
Pleas Try Following media queries:-
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Main question is how to customize bootstrap responsive css? My code partly works but I can't fix this cases. It's hard to explain so for better understanding I made visualization presented on screenshots.
I posted actual cleaned template code on JSFIDDLE.
Now when width is more then 1200px columns are ok that mean they are two span6 side by side:
Between 1200px and 980px display should looks like:
Less then 979px and more then 768px on first navbar colapse I'd like to have something like that on container center:
Until next shrinkage below 768px right column has jump to new line and stay there when reducing further to 480px and below. I think that view presented below is ok for mobile devices and better looks in narrow desktops browsers with the exception that when scale both columns are not on center:
The smallest width corresponds to my expectations.
I am not sure if I understand your question correct, but you can customise the behavior by using media queries
// Landscape phones and down
#media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
#media (max-width: 767px) { ... }
// Portrait tablet to landscape and desktop
#media (min-width: 768px) and (max-width: 979px) { ... }
// Large desktop
#media (min-width: 1200px) { ... }
Maybe you have to overwrite some classes and ids. The responsive information can be found on git:
responsive.less
responsive-1200px-min.less
responsive-767px-max.less
responsive-768px-979px.less
responsive-navbar.less
responsive-utilities.less
Nevertheless play with these Settings only if you really have to.