as usually happens I have responsive navigation div. So I want to write CSS for it to have position fixed only on mobile devices. How do I do it ?
You can use CSS Media Query.
Here You can find more information:
Using media query
An example for your case:
#media only screen and (max-width: 40em) and (orientation: portrait){ // your code}
I can't really give an example because you have been extremely vague in your question, but you can use css media queries to change styles for mobiles. You can set the maximum width for which to apply those styles to, meaning that anything smaller than that width will use those styles. (There are also loads of other options for media queries like aspect ratio; you can see more of them here, as well as how to use them).
Here is a very basic example of a media query you can use:
#media only screen and (min-width: 480px) {
/* Styles here */
}
You can read more about them at these sites:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Common CSS Media Queries Break Points
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints
[There are many more, just google it and you will find countless tutorials and examples.]
Related
I came across a situation in a project were i wanted to write media queries for iPad Air and iPad Mini separately. What i am wondering is how can i target it differently since their resolutions are overlapping. for example
#media only screen and (min-width: 768px) and (max-width: 1024px) { //iPad Mini
.content{
background-color: grey;
}
}
#media only screen and (min-width: 820px) and (max-width: 1180px) { //iPad Air
.content{
background-color: blue;
}
}
What background-color will be applied to the content class for the screen resolution which is between 820px to 1024px since it applies for both the cases? Please correct me if my understanding is wrong. what is the best way to handle such situations? thanks in advance
For screen sizes between 820px and 1024px, blue will be applied as the background color. Since both styles would validly apply to an element with class "content", and have the same specificity, the browser will apply whichever style comes last in the stylesheet. Read more here: https://css-tricks.com/precedence-css-order-css-matters/
It is technically possible to detect what device a user is using to browse your website, but only through exploitation of certain bugs, and likely not easily. You certainly can't write a media query that explicitly targets a specific device.
Even if you could easily, I wouldn't recommend it. In general, you should not design for specific devices - you should have a single, responsive design that neatly adapts to many different screen sizes.
If you're just looking for a good set of breakpoints, a common set of non-overlapping breakpoints are the Bootstrap breakpoints. A possibly better thought-out alternative are David Gilbertson's breakpoints.
Unless you have a good reason not to, you should just stick to using only min-width media queries (if your site is designed mobile-first), or just max-width media queries (if your site is designed desktop-first). This way, styles neatly and predictably overwrite each other as screen sizes get larger (in the first case) or larger (in the second case).
My apologies for writing so much but I wanted to put what I’m doing into context. So I’ll ask my question first:
Why does the HTML and CSS this link to a responsive navbar stop working when I change its “max-width” media queries to “min-width”, pixel-based media queries?
https://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/#nav
All I need is to understand why I can’t make the HTML and CSS behave exactly the same way with min-width, pixel-based media queries. What do I not get? I’ve been working with Responsive web design and development for a few years. But this clearly proves I don’t understand responsive css the way I need to. I’m coding up a responsive website from scratch for a client of my own without Bootstrap so I can hard-wire my understanding on the principles that Ethan Marcotte sets out in the second edition of Responsive Web Design.
I’m not trying to be lazy by not posting my own code. This is the exact same structure navbar I want to use for the site I’m building, and you can go straight to the relevant HTML and CSS in the above link. I’ve tried making a linked stylesheet of the embedded CSS and HTML in the above link. I’ve injected it into my own site as a separate linked-stylesheet but I’m still running into the same brick wall.
My breakpoints structure in my own stylesheet is:
`/* ====MOBILE FIRST===== */
/* Custom, iPhone Retina */
#media only screen and (min-width: 320 px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width: 480 px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width: 768 px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width: 1024 px) {
}
/* Desktop */
#media only screen and (min-width: 1280 px) {
}`
I also don’t want to have one big monster stylesheet, so I’m trying to link the navbar stylesheet to the main stylesheet, using:
`#import url('mainstyles.css');`
I know that essential css rules for breakpoints must go into specific media queries. But if all the CSS in the above navbar link have to go into all five “min-width” based media queries - that’s just CSS bloat - isn’t it? And too much unnecessary CSS code?
I’ve spent three days on it and I just can’t get the fundamental reason. How do I make the above nav bar BEHAVE EXACTLY THE SAME WAY after changing the “max-width” media queries to “min-width” pixel-based media queries? I’ve tried changing the “width” and all style rules relevant to display to percentages - but it’s not solving the fundamental reason. Many thanks in advance for all advice.
Keith :)
max-width means the query will work up UNTIL the specified width.
min-width means the query will START working at the specified width.
Your first query will work from 320px to 479px. Your second will work from 480px to 767px, and so on (you have no query for 0-319px).
In order to change max-width to min-width you'd need to bump each query down a level (XS would become min-width: 320px, Desktop would become min-width: 1024, etc.)
I've included a simple answer below, as I found, once you get the basics right with Media Queries, its an easy concept to then apply to more complex ideas...
The example below could be used for firstly, a smartphone, then going up to an iPad, then finally a landscape iPad and a desktop device...
#media screen and (max-width: 600px) {
/* Stylings for all devices with screens with a width of 600px or less.*/
}
#media screen and (max-width: 992px) {
/* all screens with a max width of 992px or less */
}
#media screen and (min-width: 992px) {
/* all screens with a width of 992px or higher */
}
I read the iPhone 6/7 (S or not) has a browser width of 375px.
However, I am writing a simple #media query like this:
#media only screen and (max-width : 375px) {
....
}
I found out that is not working until I increase the max-width to exactly 980px.
Why is that?
How can I make a #media query that treats the phone like it has 375px? I don't care how dense is the screen resolution, it is a small phone and I want to apply a phoney web design, without destroying the design for devices like tablets or small laptops with around 1000px resolution.
Ideally it should work with col-xs-X bootstrap's styles.
There is definitely another media query or default style overriding this.
Your media query is correct, but ALWAYS MAKE SURE that your media query is at the very end of your style.css file (Or whatever the name is).
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) { ... }
Suppose I have
/*
css for elements section #1 in page
css for elements section #2 in page
*/
#media screen and (max-width: 960px) {
/* redefines/alters CSS for elements in section #1 in page */
}
#media screen and (max-width: 700px) {
/* redefines/alters CSS for elements in section #2 in page */
}
I have read multiple places that it is always only one media query that is matched... And therefore one can not rely on the CSS already defined for #media screen and (max-width: 960px) will be applied first before #media screen and (max-width: 700px)
However in my tests when resizing a browser window down, I can see #media screen and (max-width: 960px) being applied first. Then I size the window even smaller I can see the changes are kept/combined when #media screen and (max-width: 700px) gets applied
So my question is... Is what I am seeing pure luck and against the specification? Or am I missing something?
Your tests prove true how it should work.
In your example, when the width of the browser is less than 960px and less than 700px, both queries would be considered to be true. That is working as intended and, in fact, is how I've implemented responsive design on several sites, each query being a new breakpoint of how things degrade gracefully into a small form factor.
With media queries, source order matters.
See Logic in Media Queries
In your case, the first query will always match when width <= 960px.
If you want to exclude that css you could add a min-width value to it.
I don't think you're understanding the point of the media query itself. Your first 960 declaration says, "if your screen resolution is less than 960px then apply these styles" and then once it hits 700 it will apply those styles. That's just basic responsive design.