I'm using Twitter Bootstrap to responsive website and I don't understand the difference between
#media screen and (min-width: 768px)
#media (min-width: 768px)
"Screen" or not? any help?
http://www.w3.org/TR/CSS21/media.html#at-media-rule
#media screen is computer screen, so
The first rule is for computer screens only with resolution width at least 768px.
The second rule is just for devices with width >=768px including tablets, phones, printers etc., that have high enough resolution.
screen is a media type and means that rule will be used on computer screens. Without it it's just a general rule and will be applied for all media types.
The browser identifies itself as being in the “screen” category.
Specification
applies to devices of a certain media type (‘screen’) ,screen is intended primarily for color computer screens. So it identifies roughly to modern devices desktop smartphone etc
So it will work for color computer screens at differing resolutions e.g.
Mobile
only screen and (min-width: 480px)
Tablet
only screen and (min-width: 768px)
Desktop
only screen and (min-width: 992px)
Huge
only screen and (min-width: 1280px)
Related
I'm creating a responsive landing page and when I test it in different tablet devices, there are adjustments I want to make (paddings, margins, etc). I managed to target the normal breakpoints but I need to target more specific ones such as:
iPad Mini - 768 x 1024 with 324ppi
iPad 10 - 810 x 1080 with 264ppi
iPad 9 - 768 x 1024 with 264ppi
Can I get this specific? When I try, it ends up messing up my non-ipad media queries.
use media query with same parameters like
#media screen and (max-width:768px) will works for and iPad 9
#media screen and (max-width:768px) and (min-resolution: 300dpi) will works for iPad Mini
#media screen and (max-width:810px) will works for iPad 10
If you want to be as specific as you can, try setting the min and max widths, as well as device orientation and pixel ratio:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait)
For more you can check this article: Popular Devices Media Queries
My website works on all mobile devices and desktops up to 5120px in width, I used media queries for portrait and landscape versions on my phone and the landscape worked perfectly for laptops and PCs alongside "min-width". However now that I'm dealing with an ultra wide monitor the bottom of my container gets cut off by the bottom of the screen. The media queries I have used so far go like this:
#media (min-width: 540px) and (orientation:landscape)
#media (min-width: 540px) and (orientation:portrait)
I used the width of the device in either landscape or portrait alongside its orientation and was happy with the results despite the effort, now Im stuck wondering what to use for most ultrawide devices to work?
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.
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 */}