I am adding some (#media) entries to make my website responsive, which works fine in Chrome.
However, in IE/Safari when I shrink it to the minimum width (<475px) it displays the old default with no mobile media settings displayed. All the other widths(476-1040) display fine.
My media settings are:
#media (min-width: 768px) and (max-width: 1040px){
#media only screen and (max-width: 475px){
#media (min-width: 476px) and (max-width: 575px){
#media (min-width: 576px) and (max-width: 675px){
#media (min-width: 676px) and (max-width: 767px){
#media (min-width: 768px) and (max-width: 1040px){
I have no webkit/moz etc settings added for any of the entries.
Fixed, there was a #media query for that size further down that was causing an overide.
Media query for Motorola e(2nd generation). Kindly post the media query. #media only screen
and (min-width: 480px)
and (max-width: 960px) and (orientation:portrait) is not working
your syntax may be wrong as posible so try this
#media screen and (min-width: 480px) and (max-width: 960px) {
//Your Code
}
What is the correct way of using media queries.
Is it method
A.)
#media (max-width: 992px){
something here
}
Or method
B.)
#media (min-width: 442px) and (max-width: 992px)
Both your examples are valid, but they are different.
#media (max-width: 992px){ The screen is narrower than 992px.
#media (min-width: 442px) and (max-width: 992px){ The screen is wider than 442px, and narrower than 992px.
Basically i am trying to block some styles for a particular width range(240px to 480px). Between this range, i do not want certain styles to get rendered.
To be more clear:
I want color:#000 for all other device widths except for the width->240px to 480px. How i can i make use of media not all queries. Hope i am clear..:(
Is this the correct syntax :
I have :
#media not all and (min-width: 240px) and (max-width: 480px), not all and (min-device-width: 240px) and (max-device-width: 480px) {
What im trying :
#media not all and( (min-width: 240px and max-width: 480px )and (min-device-width: 240px and max-device-width: 480px) ){
Can i combine the two :
#media not all and (min-width: 240px and max-width: 480px) {}
#media not all and (min-device-width: 240px and max-device-width: 480px) {}
Any help is appreciated
What you originally have is the correct syntax. The others are invalid.
The not in each media query negates the media query itself, so if the browser matched a certain media query, then not means it has to ignore that #media rule. If the browser doesn't match the media query, then not means it has to apply the rule.
When you combine two or more not media queries in a single rule, at least one of them has to evaluate to true (or "not false") in order to use the rule.
If you are trying to not all the tests at once, then you need to link them all using and:
#media not all and (min-width: 240px) and (max-width: 480px) and (min-device-width: 240px) and (max-device-width: 480px)
But depending on the devices you're testing with this may or may not make sense.
Is there a Matrix anywhere to get realistic screen availability for the most common phones which take into account the screen resolution available with toolbars visible?
We need to develop a scrolling site for mobile/tablet and although we are trying to make the css as fluid as possible the brief relies on background imagery which means we need a variety of media queries to switch the images for the best experience - a realistic resolution guide would be really helpful.
Cheers
In Google Chrome, open developer tools by pressing F12, and click on the gear icon to go to Settings -> Overrides, turn on 'User Agent', and select your desired device - with 'Device Matrix' you can customize screen size and more.
Check out http://screensiz.es/phone .
You can order phones or tablets by screen size, aspect ratio and popularity.
Also check out screencast in chrome canary dev tools.
http://www.html5rocks.com/en/tutorials/developertools/mobile/
What I am still looking for is something like google's browsersize but for mobile screen.
Update:
Google Labs Browser Size is now part of Google Analytics
For up to date datas check https://design.google.com/devices/ (AKA now as https://material.io/tools/devices/)
#media (min-width: 1200px) {
#media (max-width: 980px) {
#media (max-width: 979px) {
#media (min-width: 980px) {
#media (min-width: 768px) and (max-width: 979px){
#media (max-width: 768px) {
#media (max-width: 767px) {
#media (max-width: 480px) {
Should be the standards
I think you should definitely try this website : http://responsivetools.com/
It will give you a quick idea of how you site looks like for different mobile and tablet resolution.
There are many online services where you can view you site "through" a phone's display, with the resolutions specified.
For example: mobilephoneemulator
Statcounter probably provides the best number crunching on screen sizes and many other stats. Their page always gives me loading problems, so I prefer to find someone that has quoted their stats, than going directly to the source, like this blogger:
http://www.satya-weblog.com/2013/07/desktop-laptop-mobile-screen-resolution-most-common-worldwide.html
Hope that is a more direct answer to your question!
We'll you might want to try going here: http://cartoonized.net/cellphone-screen-resolution.php it basically gives you the best resolution depending on types of phones.
This is a list for all known CSS #media property for mobile devices + several desktop resolution that can be used.
These include Android, iPhone, iPad, Google Nexus, LG, Samsung, Nokia, HTC, Motorola, Sony and all the famous brands.
Look on GitHub
#media all and (max-width: 2560px){
}
#media all and (max-width: 1920px){
}
#media all and (max-width: 1440px){
}
#media all and (max-width: 1280px){
}
#media all and (max-width: 1200px){
}
#media all and (max-width: 1024px){
}
#media all and (max-width: 992px){
}
#media all and (max-width: 768px){
}
#media all and (max-width: 720px){
}
#media all and (max-width: 600px){
}
#media all and (max-width: 540px){
}
#media all and (max-width: 480px){
}
#media all and (max-width: 424px){
}
#media all and (max-width: 414px){
}
#media all and (max-width: 400px){
}
#media all and (max-width: 384px){
}
#media all and (max-width: 375px){
}
#media all and (max-width: 360px){
}
#media all and (max-width: 320px){
}