I have a question about CSS media queries. My question is whether the order I have my css media queries will make a difference.
For example:
<link rel="stylesheet" href="desktop.css" media="">
<link rel="stylesheet" href="laptop.css" media="">
<link rel="stylesheet" href="mobile.css" media="">
<link rel="stylesheet" href="mobile.css" media="">
<link rel="stylesheet" href="laptop.css" media="">
<link rel="stylesheet" href="desktop.css" media="">
Say I were to target desktops, laptops, and mobile devices with several media queries. Would this change how the design is displayed on multiple devices? Does the order that the links are in matter?
The short is yes it will. Quite massively.
But there is a chance that they can have a knock on effect.
As you know Cascading Style Sheets, as the name suggests, cascade through the different styles.
So for example, if you have styles in desktop.css they will roll out to all of the elements in the page.
Then laptop.css comes along and has another style that is targeted by desktop.css the style from laptop.css will take precedent. Also, applies to styles from mobile.css
Example:
//Desktop.css
body {
background: pink;
}
//laptop.css
body {
background: yellow;
}
//mobile.css
body {
background: green;
}
Without media quires it means that the background will be green.
If we do this:
//laptop.css
body {
background: yellow;
}
//mobile.css
body {
background: green;
}
//Desktop.css
body {
background: pink;
}
The background will be pink.
Place the items in the order you want them to cascade through the document. Don't place the mobile before desktop unless you want the mobile to be the default version of your site.
No and generally avoid depending only on using media types like desktop or handheld. Mobile devices are known to fake this query so they get a better stylesheet. Use the more robust media query that specifies screen resolution, pixel density etc. In your stylesheet you would do:
#media (min-width: 768px) and (max-width: 1024px) {
body {
background: #ccc;
}
}
If your queries overlap they are subject to normal cascade and can be overwritten.
Spec:
http://www.w3.org/TR/css3-mediaqueries/
Tutorial:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
You should place the mediaqueries for mobile & laptop first.
Because if you use min-width:...px for example, the css will be overridden for bigger screens and will not be overridden if the screen has the min-width.
For example, your mobile.css will be used, when the min-width is 0, your laptop.css for min-width 700 and desktop.css for min-width 1000.
If you have a screen which is 800px width, the mobile.css will be used and the laptop.css too, but not the desktop.css.
If you do it the other way around, mobile.css will override everytime, because every screen has a min-width of 0px.
As the last declaration of same css will override the previous, so it should declare the superset of the style and then narrow it down.
For example,
Color is generally the same for all desktop, mobile and size of element is different.
Related
this is something different.
I need to create a web page for IE 6 using css2 and vanilla js.
the problem is that I cant target smeller screens in IE6 so my design getting broken in screen smaller than 1000px.
in chrome and other modern browsers, I'm using media query and its working perfectly.
I have read about several hacks. but the CSS always apply to all the screen sizes and not to smaller ones
HTML:
<link rel="stylesheet" href="css/main.css">
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" />
<![endif]-->
ie.css:
body {
background: red;
}
#media screen and (min-width: 640px),
screen\9 {
body {
background: green;
}
}
how can I make it change only in smaller screens
Quite already answered there media queries internet explorer
IE6... is old.
So I would use javascript for resize event, and if the window width is smaller than 1000px, I would add a specific class to the body
Then, your CSS will be responsive by using the new class added to body, instead of media queries..
Something like
/* Standard style */
body{background: red;}
.a-class{color: black;}
/* Responsive style */
body.resp-class{background: green;}
body.resp-class .a-class{color: red;}
I have been trying to change the background color of my webpage if the screen size is lesser than 400px. However, the media queries do not seem to work at all. I have this meta tag in place;
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
The following is the media query I'm trying to work.
#media screen and (max-width: 400px) {
body
{
background-color: red;
}
}
I have tried using "#media only screen" too. It still doesn't seem to affect the program in any way.
This following is a minimal, complete and verifiable example
<html>
<head>
<!-- Responsive Meta Tag -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
{{'Hello'}}
</body>
<style type="text/css">
#media screen and (max-width: 400px) {
body
{
background-color: red;
}
}
</style>
Thanks in advance
The #media query is valid and works perfectly.
If it doesn't work in your application, it means you have a stronger CSS selector overriding the selector used in the #media query. Like, for example:
body {
background-color: white !important;
}
#media screen and (max-width: 400px) {
body {
background-color: red;
}
}
#media query still works, but !important rule has higher CSS specificity and therefore applies to the element.
Very important note: #media queries do not increase specificity. They simply tell the browser to apply the rule selectively based on the given condition. But, when the condition is true, the code inside it is treated as it if wouldn't have been wrapped in the condition. So it doesn't have increased specificity.
Note Another common reason for #media queries "not applying" is when they're tested in browsers with a zoom level set at another value than 100%.
To reset the zoom level of your browser use Ctrl + 0
To see where the currently applying value for any CSS property on any element in your page comes from (what selector, what stylesheet, what line number), all you need to do is to use a browser developer console (typically opened by selecting "Inspect Element" (or similar) from the context menu, if used on the element).
I'm using this media query in my main css stylesheet and it doesn't seem to be working.
#media only screen and (max-device-width : 768px) {
.small { display: block; }
.big { display: none !important;}
}
In the web inspector it doesn't even show up as a rule, however when i look in the sources panel the query is obviously there. So i'm not sure what the problem could be. I am trying to target devices with a width less than 768px.
Here's how i'm linking to the stylesheet, if that matters
<link rel="stylesheet" media="screen" type="text/css" href="{site_url}interface/style.css" />
As you are using max-device-width it won't affect in web browsers, You should check on mobile browsers to see its working or not.
Or if you want to check on web browsers, Then use just max-width instead.
See Working Demo
CSS
#media only screen and (max-width : 768px) {
.small { display: block; }
.big { display: none;}
}
I have a website that I need to have working on mobile devices currently it displays like the image below.
So far I have had the following ideas:
Copy the 680 lines of CSS again within the same document in between #media only screen tags.
Copy the same code into a mobile.css stylesheet and start again
"2" is my least favourite option but the most likely I am just wanting to know what your options would be?
iPhone View:
Put this in the head of your HTML
<meta name='viewport' content='width=device-width, initial-scale=1 />
It's going to take a little work but is worth it. You have to take the CSS that is too big on mobile and put them in specific media queries based on size. Let's say you want your titles to change from 80px to 40px when the screen size is less than 600px:
#media screen and (max-width: 1000px) {
.mytitle {
font-size: 80px;
}
}
#media screen and (max-width: 600px) {
.mytitle {
font-size: 40px;
}
}
hi i'm creating an enewsletter and am trying to resize it for when its viewd on a mobile i have it working on iphone but android i'm unsure as to how to resize because of the massive screen variants. heres what ive got so far.
so in my i have too added things that overide the style if the screen width is a certain size.
#media only screen and (max-device-width: 320px) {
.hide { display: none !important; }
#main_content, #inner_content, .mobwidth { width: 300px !important; }
#content_rows, .mobwidthtext {width:300px !important;}
.banner {height:94px !important;}
.top {height:67px !important;}
.footer {height:109px !important;}
}
#media only screen and (max-device-width: 400px) {
.hide { display: none !important; }
#main_content, #inner_content, .mobwidth { width: 400px !important; }
#content_rows, .mobwidthtext {width:380px !important;}
.banner {height:117px !important;}
.top {height:83px !important;}
.footer {height:136px !important;}
}
Most email clients ignore CSS declarations that are not inline. Embedded stylesheets are ignored as well. Media queries will not work because they would override those made by web-based email clients, such as Gmail (i.e. what you want to do will not work).
Email HTML standards are pretty brain-dead. Keep in mind that things like MS Outlook don't even use browser technology to view emails - they use the MS Word engine.
Here's a good guide as to what CSS features can be used in emails:
http://www.campaignmonitor.com/css/
I disagree with the above answer. Using media queries for mobile will most definitely work but for android set your max screen size to 480. make sure to keep !important on all styles set by the query and ensure you have a general layout in your inline styles. this will result in browser stripping the css in head and just using the inline. Then the mobiles (majority of which do not strip head) using your media queries, I would recommend a large amount of testing before a send. But the only issue you have atm is just finding the correct maxwidths as you have to take into account the portrait and landscape widths as well. While also considering that zoom can also set off meia Queries with some devices