Phone uses another media screen query - css

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!

Related

Could we today ignore widths smaller then 960 px?

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.

set large font size for high resolution device in media-query

IPad resolution is 768*1024, but a mobile maybe 720*1024. I want to set larger font for device, so that its size in pt is same as pad. for example:
#media (min-width: 700px) {
#div_test{
font-size:22px;
}
}
how to modify the #media condition?
#media (min-width: 700px){
/*code*/
}
The min-width property in the media query works a little different. It is not the resolution of the screen. It is equivalent css pixel.
Here are a couple of articles.
A pixel identity crisis.
A pixel is not a pixel is not a pixel.
moz media query page.
If you want to target device resolution you should use
#media all and (max-device-width: 320px) {
}.
max-device-width:This property measures the device-width. If you write css using media query using this it will get a little complex (mobiles tabs and even desktops can have 1080p resolution screens). In order to target device resolutions you might have to look into properties like -device-pixel-ratio, orientation and device-height to give better control of layouts.
Here is a list of media queries for ipad
This media query targets all ipads.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}

Is there some "best approach" for responsive design?

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) { ... }

Bootstrap 3 - Grid Breakpoints for responsive design and Hi Res Mobile

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.

media query not operator

Gidday
I've been trying to figure out making a media query that serve screens up to 660px a high res image, but not screens that are exactly 321px.
The purpose is to serve desktops/laptops etc and my desktop app that has a 321px viewport a normal low res image, while anything under 660 (excluding the 321px viewport) gets a high res image.
It works using these two queries, but the 320px viewport is requesting both images. I could be lazy and leave it as is, as it achieves what I want display wise, but it's eating unnecessary bandwidth:
#media all and (min-width:661px){ //serves high res image to iphones etc (good), but also my 321px desktop app viewport (bad)
followed by...
#media all and (min-width: 661px), all and (width:321px) { //serves low res image to desktops (good) and my 321px desktop app viewport (good)
I've been playing with the not operator in the first query, but haven't cracked it eg
all and (min-width:661px) and not (width:321px)
...but no go.
So how do I alter the first query to say...
allow for all under 660px, but ignore any that are 321px exactly?
Thanks for having a look.
Here are some media queries. The last one is what you are looking for. Anything between 320px, and 322px it will show your body background as black. Just like saying ONLY show at 321px. Hope this helps!
#media only screen and (max-width: 660px) { body {background:red;} }
#media only screen and (min-width : 320px) and (max-width : 322px) {body{background:#000;}}
Nevermind - I think I cracked it without using not - here it is...
#media all and (min-width: 322px) and (max-width: 660px), (max-width: 320px) { //hi res image for all screens 660px and below, excluding those exactly 321px
...followed by...
#media all and (min-width: 661px), all and (width:321px) { //low res image for all screens above 660px, plus those exactly 321px
Seems to be working how I wanted.

Resources