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.
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 coded a responsive website, in which I have CSS media queries to detect the screen size(pixels) of the device the user is navigating with.
Just standard medias. Example:
#media (max-width: 1199px){
/*code*/
}
#media (max-width: 991px){
/*code*/
}
#media (max-width: 767px){
/*code*/
}
When I test my website with my mobile, which is a Samsung Galaxy S4 with 1920x1080 pixels my website shows me the mobile version, which is in this case the #media query with a max-width of 767px.
I understand that most things would be too small to read or be seen if my mobile respected exact measures like 12px font size.
So my question is, how do I control which version of my website is shown on high resolution devices, because pixels media queries aren't working in my case.
#media (max-width: 1199px){
/*code*/
}
The max-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
The problem might be that you didn't include a viewport meta-tag
<meta name="viewport" content="width=device-width">
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) { ... }
I'm stuck trying to extend a couple of media queries.
I've got one max-width based query and one min-width based one that looks like this:
#media only screen and (max-width: 600px) {
/* styling goes here */
}
#media only screen and (min-width: 600px) {
/* styling goes here */
}
I would like to extend the first query to also make it enabled on any device that recognizes itself as being in portrait orientation and likewise extend the second query to trigger when having a device that is not in portrait mode.
The second media query (the min-width based) should never apply while in portrait mode, regardless of the device width.
You can just add and (orientation:portrait) or and (orientation:landscape) to your media queries.
For example:
#media only screen and (max-width: 600px) and (orientation:portrait) {
/* styling goes here */
}
#media only screen and (min-width: 600px) and (orientation:landscape) {
/* styling goes here */
}
EDITED
Based on your JS Bin example, although I'm still not 100% sure what your issue is, you can remove the "white gap" you get by removing the (orientation: landscape) from the second query.
I suspect the first one isn't triggering in your ipad as the max-width is wrong, I believe it should be 768px for an ipad (see The Responsinator for a guide).
I think you are not looking for the AND operator, but the OR one, which in the CSS world is just a comma. Hence you can do things like:
#media only screen and (max-width: 600px),
screen and (orientation:portrait) {
/* styling goes here */
}
However, in order to achieve the result you wish you would have to invert the order of your queries so that they can cascade correctly. This is because, for example, in the iPad, even in portrait orientation you are going to have a min-width: 600px, evaluating one of the two statements to true and hence triggering the media query.
By putting the portrait media query below the landscape one, you will actually make sure that when the orientation query evaluates to TRUE you will be overriding the previous styling.
You can see a modified working version of your JSBin here:
Working example
Try this with the iPad. Though being larger than 600px in portrait mode, it will still display: small-screen.
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.