Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 days ago.
Improve this question
What are the difference between these:
#media (max-width: 100px) { /* CSS Rules */ }
#media screen (max-width: 100px) { /* CSS Rules */ }
#media screen and (max-width: 100px) { /* CSS Rules */ }
#media only screen and (max-width: 100px) { /* CSS Rules */ }
#media only screen (max-width: 100px) { /* CSS Rules */ }
Thank you! :)
The only difference between these examples is the syntax.
#media (max-width: 100px) { /* CSS Rules */ } - this is a basic media query that checks the maximum width of the screen. Since no media type is specified it defaults to screen.
#media screen (max-width: 100px) { /* CSS Rules */ } - this media query is similar to the first one, but it explicitly specifies the media type as screen.
#media screen and (max-width: 100px) { /* CSS Rules */ } - this is the same as the second example - the and is implied in the prior case but explicitly set here.
#media only screen and (max-width: 100px) { /* CSS Rules */ } - this media query is the most specific and recommended syntax. It uses the only keyword to hide the media query from older, incompatible browsers, and it explicitly specifies the media type as screen.
#media only screen (max-width: 100px) { /* CSS Rules */ } - this is similar to the fourth example, but it does not use the and keyword explicitly.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
What will be width for every devices in bootstrap 3 for responsive if I put .container max-width for large 940 px?
What will be the max-width size in media query for medium, small and extra small devices????
because I want to write media query for every devices for fixing some problem.
Please give answer with code of media query of this...
Those are the media-queries you'll find in core css. You'll have to set your custom widths in order to fix your problem.
If you need to keep proportions, try using Photoshop to scale your 940px, to smallest sizes.
Personally, even when it is okay you overwrite the largest container, I wouldn't overwrite .container for smallest devices. But it depends on you.
You'll have to add a .container and set your custom width inside each media-query.
/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
.
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Working on a large content project doing some upfront research.
Personally, I like to reference popular frameworks and see what they support. For instance, Zurb's Foundation uses the following breakpoints (and is mobile-first, something to consider...):
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
http://foundation.zurb.com/docs/media-queries.html
Or, you can check out what Bootstrap is doing (again, "mobile first")...
/* 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) { ... }
http://getbootstrap.com/css/
I like to think that as new devices come out (iPhone 6/6 Plus), those frameworks will be updated as they receive feedback form users.
Hope this helps!
#media only screen and (min-width : 1824px) {}
#media only screen and (min-width : 1224px) {}
I am using these mediaqueries and these are working fine but when I see my website at 1280px resolution, it does not work
Try like this:
#media screen and (min-width: 1024px) and and (max-width:1280px)
{
.....
}
#HMS Designz, If you want to access media query 1280 to 1024 resolution. You can try like this.
#media screen and (min-width:1024px) and (max-width:1280px) {}
#media all and (min-width: 1280px) {
/* css for width greater than 1280px */
}
#media all and (max-width: 1280px) and (min-width: 1024px) {
/* css for width between 1280px and 1024px */
}
#media all and (max-width: 1023px) {
/* css for width less than 1024px */
}
Here is detailed explainition of media queries.
include this in <head></head> (if you have not)
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
change you #media style as this // change width as per your requirements
#media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
Now I try to explain maybe..:)
#media (max-width:500px)
for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:500px)
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
#media only screen and (max-width:500px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
If
That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.
And
The keyword and.
#media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
Comma separate.
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
Technically these are treated like to separate media queries, but that is effectively and or.
Not
Reverse the logic with the keyword not.
#media not all and (max-width: 600px) {
html { background: red; }
}
Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y
Exclusive
To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.
#media (max-width: 400px) {
html { background: red; }
}
#media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
#media (min-width: 801px) {
html { background: blue; }
}
Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.
Overriding
There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.
#media (min-width: 400px) {
html { background: red; }
}
#media (min-width: 600px) {
html { background: green; }
}
#media (min-width: 800px) {
html { background: blue; }
}
Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.
Mobile First
Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.
html { background: red; }
#media (min-width: 600px) {
html { background: green; }
}
Desktop First
Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.
html { background: red; }
#media (max-width: 600px) {
html { background: green; }
}
You can be as complex as you want with this.
#media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.
And for media queries priorites
sources : one two three four five
You are not create any media query for 1280 px resolutions. First create media query for that resolution using following media query.
#media screen and (min-width:1024) and (max-width:1280px)
{
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to be able to swap the jquery mobile CSS for a desktop "friendly" CSS. For example when a user is NOT on a mobile device display the styles in a non mobile type style. Is there a platform or existing CSS that does this?
Just change the mobile version css to looks good in desktop.
CSS3 Media Queries
Some Examples:
Max Width -
If the viewing area is smaller than 600px.
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
Min Width -
The following CSS will apply if the viewing area is greater than 900px.
#media screen and (min-width: 900px) {
.class {
background: #666;
}
}
Multiple Media Queries -
Combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.
#media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width
The code will apply if the max-device-width is 480px (ex. iPhone display)
#media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
Link to a separate stylesheet:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
I have been using and learning CSS3 a fair bit of late and enjoying its many capabilities. Right now I am wondering if it is possible to setup a CSS rule that assigns a block element width conditionally. The sort of thing I am after - if the screenwidth is less than, say 500px, use a width of 320px otherwise use a width of, say, 80%, of screen size.
Yes, I realize I could do this sort of thing through JavaScript - just wondering if there isn't a more elegant CSS3 approach.
Yes, it is very much possible using CSS media queries - http://www.css3.info/preview/media-queries/
.mydiv {
width: 80%; /* normal case */
}
/* special case if screen width < 500 */
#media all and (max-width: 500px) {
.mydiv {
width: 320px;
}
}
#media only screen and (max-width: 500px) {
// CSS rules go here
}
#media only screen and (min-width: 501px) and (max-width: 959px) {
// CSS rules go here
}
#media only screen and (min-width: 960px) {
// CSS rules go here
}
etc...
From the W3C