This is my current code:
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 750px)">
Is there an option to have a min AND a max query?
I tried media="screen and (min-width: 250px), screen and (max-width: 750px)"
but it didn't work.
Is there a solution for this?
I think you need this way
Make a file for styles route and import other the style file in the #media for any size
example :
#media only screen and (max-width: 750px) {
#import "./example.css";
}
In style.css there should be a query like this.
Example: on screens that are 600px or less, set the background color to olive
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
You can use simply like this.
#media only screen and (min-device-width: 767px) and (max-device-width: 1024px) {
/* your code here */
}
Related
I am very confuse with the media query because when ever i apply media query it does not work properly is there ant sequence to write it in CSS file?
#media max-width(767px) {body{background:red;} }
#media max-width(992px) {body{background:blue;} }
#media max-width(1200px) {body{background:#fff;} }
Is there any proper sequence to write it according to the screen size?Is the any difference if i write it like this?
#media max-width(1200px) {body{background:#fff;} }
#media max-width(992px) {body{background:blue;} }
#media max-width(767px) {body{background:red;} }
You have to write your media as below.
Learn here:https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
See here:https://jsfiddle.net/r60xs5j7/3/
#media only screen and (max-width: 767px) {body{background:#fff;} }
#media only screen and (max-width: 992px) {body{background:blue;} }
#media only screen and (min-width: 1200px) {body{background:red;} }
and whenever you put them in css they have to work(Except for a case of override that you will need use !important)
See here(end of css):https://jsfiddle.net/r60xs5j7/5/
Note!
You need this meta in head tag to make media query works:
<meta name="viewport" content="width=device-width, initial-scale=1">
I wrote a simple HTML program for experimental purposes:
Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
#media screen and (device-height: 375px) and (device-width: 667px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>
</body>
</html>
But ut doesn't change color when it is tried in iPhone 6. What is wrong with the code? Is logical expression correct?
this works for me on the iphone 6:
#media only screen and (min-device-width: 374px) and (max-device-width: 376px)
this works on the iphone 6+:
#media only screen and (min-device-width: 413px) and (max-device-width: 415px)
This works in a browser and hopefully on your IPhone too:
(Max-width and min-width instead of device-height and device-width)
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
#media screen and (max-height: 375px) and (max-width: 667px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>
</body>
</html>
Use max-device-width and min-device-height.
#media all and (min-device-width: XXXpx) and (max-device-width: XXXpx)
I can't figure out the issue. I searched a lot and after that. I am here for help so guys please help me. Below is the HTML I use:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
and these are the media queries
#media all and (max-width: 1400px) { }
#media all and (max-width: 1024px) { }
#media only screen and (max-width: 768px) { }
#media only screen and (max-width: 480px) { }
#media only screen and (max-width: 320px) { }
Help me identify what is wrong.
#media all and (min-width: 1400px) {
}
#media all and (max-width: 1399px) and (min-width: 1024px) {
}
#media all and (max-width: 1023px) and (min-width: 768px) {
}
#media all and (max-width: 767px) and (min-width: 480px) {
}
#media all and (max-width: 479px) and (min-width: 320px) {
}
#media all and (max-width: 319px) {
}
This in <head></head>
<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.
I try to put some more information here, gathered from web.
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
If you have not defined css properties for different medias, how do you expect the browser to render it?
You need to for example:
#media only screen and (max-width: 480px) {
#header
{
width:100%
background:red;
}
}
I have added the following code to my style.css file in my wordpress theme but it doesn't work. I want the body background to change for screen widths between 768 and 1024px
CSS:
#media screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
body {
background: #fff;
border-top: 2px solid #DDDDDD;
}
}
One of possible solutions is including
<meta name="viewport" content="width=device-width, initial-scale=1.0">
To head tag
You might have an issues with the order of the media query in which you mentioned the styles
check this fiddle, change the browser width to see the the media query in action
#media screen and (max-width : 1500px) {
body {
background: #000;
border-top: 2px solid #DDDDDD;
}
}
#media screen and (min-width : 768px) and (max-width : 1024px) {
body {
background: #fff;
border-top: 2px solid #DDDDDD;
}
}
This fiddle works fine, but if you change the order of the media queries it wont work...try it for yourself!
CSS always selects the last style that was declared if multiple style are found for an attrib.
for e.g :
#media (max-width: 1024px) {
body {
background: black;
}
}
#media (max-width: 768px) {
body {
background: white;
}
}
for 765px ( since both m.q cover this width ) color selected would be white
sometimes one may miss adding px at the end of the number
#media screen and (max-width: 1024)
This will not work, so px should be added as the following
#media screen and (max-width: 1024px)
try
#media only screen and (min-width: 768px) and (max-width: 1024px) {
}
you can also make another file like: smallScreen.css and add it directly in your head tag under your main stylesheet using this code:
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" media="only screen and (max-width:768px) "href="/smallScreen.css" />
then you can add style in the new file as well if "only screen and..." doesn't work you may avoid using: only
if someone is still facing issues, one minor reason could be the syntax.
make sure you provided space between {and} and (max-width:1500px} --->
wrong one ----->
#media only screen and(max-width:1500px){
body{
background-color: coral;
}
}
right one ------>
#media only screen and (max-width:1500px){
body{
background-color: coral;
}
}
only a single space could decrease your frustration level drastically.
i want to test the orientation by using css for ipad.This is the css file i use
#media only screen and (device-width:768px) and(orientation:portrait) {
body { background: green; }
}
#media only screen and (device-width:768px) and(orientation:landscape) {
body { background: red; }
}
I am not sure whether this will work or not. I tried testing in an iphone emulator by changing the device width to 320px.But it didn't work. Do i need to change anything in this css file?
This is how i call the css in the main page
<link rel="stylesheet" type="text/css" href="iPad.css" />"
This is what I use for calling stylesheets with landscape and portrait stylesheets:
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/portrait.css">
I also found this link for you which is pretty helpful:
http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
I resolved the problem by using this css.
#media only screen and (device-width:768px) and(orientation:portrait) {
body { background: green; }
}
#media only screen and (device-width:768px) and(orientation:landscape) {
body { background: red; }
}