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.
This question already has answers here:
How do I combine two media queries?
(2 answers)
Closed 2 years ago.
How could i apply different media queries in a single CSS file.I am applying the below queries but only the latest one works..
#media only screen and (max-width: 500px){
css styling here
}
#media only screen and (max-width: 600px){
css styling here
}
If you're defining the same CSS properties of the same elements, the last definition will have priority.
In this case, here is a solution :
#media only screen and (max-width: 500px){
/* CSS apply on width between 0 and 500px */
}
#media only screen and (max-width: 600px) and (min-width: 501px){
/* CSS apply on width between 501px and 600px */
}
The meta tag should be added in the <head> tag in HTML document. Please check that have you added
<meta name="viewport" content="width=device-width, initial-scale=1">
The sequential order of css code also matters. Please change sequence by following:
#media only screen and (max-width: 600px){
body{ background:green;}
}
#media only screen and (max-width: 500px){
body{ background:red;}
}
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 7 years ago.
Improve this question
I have been given a mock-up design with a header that hass a curved image (similar to http://www.smartwebby.com/images/tutorials/fireworks/website_design_fireworks/pic_header_footer.gif or http://theme-fusion.com/wp-content/uploads/2014/10/curved-header.png). at the top. The thing is it has to be fluid & responsive. I like to conceptually figure things out somewhat before I start making them. Can someone help me how I would make this responsive. If I just make it 100% width its going to be extremely distorted at some points. Any ideas?
As you guessed you can use width: 100% but then use media queries to serve a different image to different screen sizes such as:
header {
width: 100%;
}
#media only screen and (min-width : 480px) {
header {
background-image: url("/img/image-xs.png");
}
}
#media only screen and (min-width : 768px) {
header {
background-image: url("/img/image-sm.png");
}
}
#media only screen and (min-width : 992px) {
header {
background-image: url("/img/image-md.png");
}
}
#media only screen and (min-width : 1200px) {
header {
background-image: url("/img/image-lg.png");
}
}
The multiple selection of images allows you to combat the pixelation that you are afraid of. By serving an image that fits the screen best at different break points, you will keep the image quality relatively good at all sizes.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a background image on my desktop site. However, because of the size it makes the mobile site slow and out of proportion. Is it possible to remove the background image for the mobile site or at least make it responsive?
Actually to hide background image here is the simple css:
background-image: none;
Here is the solution for mobile, i used media queries
HTML
<div class="bgimg" >
</div>
External CSS
/* Show in Large desktops and laptops */
#media (min-width: 1200px) {
.bgimg {
background-image: url('../img/your-eternity.jpg');
background-repeat: no-repeat;
height: 800px;
width: 1000px;
background-size:100% auto;
}
}
/*Hide in Other Small Devices */
/* Landscape tablets and medium desktops */
#media (min-width: 992px) and (max-width: 1199px) {
.bgimg {
background-image: none;
}
}
/* Portrait tablets and small desktops */
#media (min-width: 768px) and (max-width: 991px) {
.bgimg {
background-image: none;
}
}
/* Landscape phones and portrait tablets */
#media (max-width: 767px) {
.bgimg {
background-image: none;
}
}
/* Portrait phones and smaller */
#media (max-width: 480px) {
.bgimg {
background-image: none;
}
}
Hope helps someone.
The code below is adapted from a great blog post by Tim Kadlec that walks through the various scenarios for conditionally displaying a background image.
For your scenario, the mobile version is set to match the width of its parent element. Depending on your layout, you may need to set/restrict the size of the element that #container is in.
If you elect to hide the background image on mobile, then the first style block would go inside the first media query and the second one could be eliminated. As popnoodles mentioned, posting some code would make it easier to provide a more specific solution.
<div id="container"></div>
#container {
background-image: url('images/bg.png');
}
#media all and (min-width: 601px) {
#container {
width:200px;
height:75px;
}
}
#media all and (max-width: 600px) {
#container {
max-width: 100%;
background-size: 100%;
}
}
You can use media query to specify different css rules for desktop version of site and mobile site .
Refere How to use CSS media query to scale background-image to viewing window
Using media queries depends on resolution of the screen we can set the styling .
Refere https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries for more information about media query .
You can also refer
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ for creating mobile version of your website .
#media only screen and (max-device-width : 640px) {
/* Styles */
}
#media only screen and (max-device-width: 768px) {
/* Styles */
}
This is what I have so far. The PSD mockup for the mobile site I'm working on, is 640px wide. The other one, the tablet version of the site, is 768px. I was able to test the site in my web browser by only using max-width, but now it's time to get this site working on the devices, and it's still rendering the regular full size web page. The two queries above are my best guess. Where am I going wrong?
This can be done with Level 4 Media Queries: (Browser Support is quite good - CaniUse)
Interaction Media Features
The idea here is to target devices based on their capabilities. (as apposed to say, checking the size or resolution of the device which tend to be moving targets)
The pointer media feature queries the quality of the pointer mechanism used by the device.
The hover media feature queries the user’s ability to hover over elements on the page with a given device.
So to answer the question...
Mobile devices/tables are similar in that:
1) The accuracy of the primary input mechanism of the device is limited.
This means we could use the following media query:
#media (pointer:coarse) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 200px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
#media (pointer:coarse) {
div {
background: red;
}
}
<h2>The pointer media feature queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>
Codepen Demo
2) The primary pointing system can’t hover
So our media query would look like this:
#media (hover: none) {
/* custom css for devices where the primary input mechanism cannot hover
at all or cannot conveniently hover
}
NB: Chrome/Android prior to version 59 required the on-demand value for hover/any-hover media queries. This value was later removed from the spec and no longer required by Chrome from version 59.
So to support older versions of Android you need
#media (hover:none), (hover:on-demand) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 150px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
#media (hover:none), (hover:on-demand){
div {
background: red;
}
}
<h2>The hover media feature queries the user’s ability to hover over elements on the page</h2>
<div>The background here will be green on 'desktop' (devices which support hover) and red on 'mobile' (devices which don't [easily] support hover ) </div>
Codepen Demo
NB:
Even if you were to connect a mouse to a mobile/tablet, the hover media feature still matches none since their primary interaction mode doesn't support hover.
If we do want to take secondary devices into consideration we could use the any-pointer and any-hover features
So if we wanted mobile devices connected with a pointing device to be treated like a 'desktop' we could use the following:
#media (any-hover: hover) { ... }
Extra reading
Interaction Media Features and their potential (for incorrect
assumptions)
https://css-tricks.com/touch-devices-not-judged-size/
Edit Note: This is specifically a method that worked with older browsers. The accepted answer has been updated to a more modern CSS that does have media queries that makes this easy. I mainly suggest using my older code for CSS specific to older browsers.
Instead of using specific widths initially, or messing around with orientations, or any other nonsense, I suggest using the following media tag...
#media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
/* Your touch-specific css goes here */
}
#media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
/* Your click-specific css goes here */
}
And what do you use these tags for? To set stuff for hover & click vs touch events.
Touch devices, other than a few devices in grey areas above addressed, have a very different resolution than desktop devices. Do -not- this to set design elements, but navigation elements. Some pudents may cry that some insanity with max-width may be better, but there's so many HD phones it's ridiculous that device-max-width quickly becomes useless.
However, you should use width media width queries. However, don't bother with max-device-width, just max-width & min-width. Let the above tags address your touch vs not touch users, let min-width vs max-width address based on window size and adjust site visuals.
Further, using orientation to determine if it's mobile or not is just silly, as even monitors can be placed in various orientations (a common setup I've seen for 3-monitors is a portrait center monitor and landscape side monitors.)
For width views, focus on making your site clean on various widths, ignoring what kind of device is actually accessing it, just make sure your screen displays cleanly at various sizes. That's good design that applies to both desktop and mobile. If they have your site in a small window at the upper left corner of their screen for reference (or quick distraction) while using the majority of their screen real estate elsewhere, and it should be for them, as well as mobile users, that your smaller widths are built for. Trying anything else is quickly going down a very painful and self-defeating path for web development. So for those smaller widths, you can set your widths to whatever you want, but I'll include a few I personally like.
So altogether, you should have something like this...
#media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
#touch_logo {
display: inherit;
}
#mouse_logo {
display: none;
}
/* Your touch-specific css goes here */
}
#media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
#touch_logo {
display: none;
}
#mouse_logo {
display: inherit;
}
/* Your click-specific css goes here */
}
#media (min-width: 541px){
/* Big view stuff goes here. */
}
#media (max-width: 540px) and (min-width: 400px){
/* Smaller view stuff goes here. */
}
#media (max-width: 399px){
/* Stuff for really small views goes here. */
}
Although, don't forget to include the following in your page's head:
<meta name='viewport' content="width=device-width, initial-scale=1" />
It may still break on some cases, but this should be more concise and more complete than many other solutions.
You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes:
#media all and (min-width:960px) and (max-width: 1024px) {
/* put your css styles in here */
}
#media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
#media all and (min-width:769px) and (max-width: 800px) {
/* put your css styles in here */
}
#media all and (min-width:569px) and (max-width: 768px) {
/* put your css styles in here */
}
#media all and (min-width:481px) and (max-width: 568px) {
/* put your css styles in here */
}
#media all and (min-width:321px) and (max-width: 480px) {
/* put your css styles in here */
}
#media all and (min-width:0px) and (max-width: 320px) {
/* put your css styles in here */
}
This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range (ie 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.
Also, don't use px anywhere - use em's or %