I've been reading a lot about RWD and really wanted to give it a go so I have a website to build for a friend and thought it would be a good tester. I watched a video on YouTube that said if you were starting from scratch building a site and want it to be responsive, build it from the smallest viewport then scale it up as you go a long, so this is what I am doing.
However, my first CSS media query:
#media only screen and (min-width: 480px) and (max-width: 767px) {
body {
background: #000;
}
Once the device / browser reaches a min width of 480px and I want the background to go black (purely for testing purposes) it doesn't seem to respond.
Here is the code for my website: http://jsfiddle.net/F6Xbp/
Originally I did have a media statement that said:
#media only screen and (max-width: 479px) {
}
This was where I began building the website, but i removed this as I thought that as each viewport is recognised, the styles would be over-ridden so I could use the max-width: 479px as my base starting point.
I look forward to hearing some replies and no doubt I'm overlooking something so simple here.
Keith :-)
Updated jsFiddle
You need to put the code you want to change within the #media queries and makes sure they don't overlap each other (or are at least positioned in sequence to where it doesn't matter if they are). As you had it the bottom most media query was overriding most of the others
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
body {
background: #000;
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
body {
background: red;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
body {
background: green;
}
}
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (min-width: 959px) {
body {
background: blue;
}
}
I made it work: http://jsfiddle.net/F6Xbp/1/
Technique 1
#media screen and (max-width: 480px) {
body { background-color:black; }
}
Technique 2
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
body { background-color:black; }
}
For the difference between max-width and max-device-width, see this.
Related
I am doing my first steps in repsonsive design world.
I found out that the most recommended way is to use min-width and max-width to find out the size of the display area, like this:
#media (max-width: 1200px) { ... } /* for desktops */
#media (max-width: 991px) { ... } /* for laptops */
#media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
#media (max-width: 768px) { ... } /* for smaller tablets */
#media (max-width: 500px) { ... } /* for cellphones */
The problem is that newer phones have high density screens. My phone has width of 980px. Therefore it loads wrong CSS which is meant for larger screens.
I tried out max-device-width. It takes into account logical pixels and my phone width is 393 of those. It worked. But max-device-width is deprecated so i don't want to use it.
I found some examples of min-resolution and max-resolution as well.
It is also possible to use JavaScript to determine if the browser is mobile browser, but it doesn't seem to be the correct approach.
So I got kind of confused. Please give me hints what and how should I use to determine if the site is running on a mobile device and how to load the correct CSS for it. How it has to be done in correct and reliable way?
Thank you in advance.
first at all, the way you use it, wouldnt work well. For example:
#media (max-width: 1200px) { ... } /* for desktops */
#media (max-width: 991px) { ... } /* for laptops */
if a screen has the width of 900px, then both media queries would apply. Because 900px is below 1200px and below 991px. For that specific case your media queries should be as follow:
/* for desktops */
#media only screen
and (min-width: 1367px) {
...
}
/* for laptops */
#media only screen
and (min-width: 991px)
and (max-width: 1366px) {
...
}
/* for large tablets */
#media only screen
and (min-width: 769px)
and (max-width: 990px) {
...
}
/* for smaller tablets */
#media only screen
and (min-width: 481px)
and (max-width: 768px) {
...
}
/* for cellphones */
#media only screen
and (max-width: 480px) {
...
}
as you noticed, it should contain min and max width unless its the lwoer or top end (desktop and smartphones) the smallest smartphone size is 320px btw.
Also I changed the media queries to screen only, its just good practise as you want to address screens only.
Screen size:
Notice the difference between Hardware pixels and viewport Pixels. your phone might have something above 900 hardware pixels but onyl half or a quarter of it as viewport pixels.
Hardware pixels are the pixels that a device has physically and viewport pixels the pixels which can bea dressed by css.
The reason is, that the ahdrware pixels are not actually adressable is for sharpness. besides, it owuld be nearly unreadably otehrwise.
Edit: The cheap laptops screen panels have a resolution of 1366 x 768px. so the laptop width should be also set to 1366px.
There is a difference between device pixels and CSS pixels. On many screens they are treated the same, but on high DPI screens there can be several device pixels per CSS pixel. See this page on MDN for more reading.
To control the width in CSS pixels, use the viewport meta tag in your HTML. This tag is generally only interpreted on mobile devices so it shouldn't affect your site on desktop browsers. It specifies the minimum width at which your site will be displayed.
For example, to set your site to display at a minimum width of 500px on mobile, use:
<meta name="viewport" content="width=500, initial-scale=1">
To display the site at the browser's width use:
<meta name="viewport" content="width=device-width">
In addition to the MDN article, the following article may be helpful for setting display widths for tablets.
For responsive design, it's recommended to use Mobile First approach. You start with styling the mobile version and change it while the viewport grows.
With the following media queries you have different problems:
#media (max-width: 1200px) { ... } /* for desktops */
#media (max-width: 991px) { ... } /* will match laptops and desktop because your screen with is underr 991 but also under 1200px */
#media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
#media (max-width: 768px) { ... }
#media (max-width: 500px) { ... }
the correct approach should be
// you start with mobile version
#media (min-width: 500px) { ... } // will match only screen width >= 500px
#media (max-width: 768px) { ... } // will match only screen width >= 768px
#media (min-width: 768px) and (max-width: 990px) { ... } // will match only screen width >= 768px and < 900px (could be tablets also)
#media (min-width: 991px) { ... } // match also ipad on landscape mode
#media (min-width: 1200px) { ... } /* for desktops */
I tried searching on the internet for an answer and I couldn't find one that worked. I want to make my site responsive to mobile where the li elements become smaller on the screen when vertical. This is my code, I did put in a link to the style sheet where it is and did put the meta viewport part in the heading section.
#media only screen and (max-width: 400px) {
.list {
width: 30px; height: 20px;
}
}
Here are some common standard points:
#media (min-width: 320px) { /* for iPhones and smartphones */ }
#media (min-width: 481px) { /* for larger phones and small tablets */ }
#media (min-width: 600px) { /* for tablets */ }
To be honest, it would be really helpful if there was such thing as #media (min-size: iPhone) or #media (min-size: windows_tablet); it would make it a whole lot easier.
I am coding a site with AngularJS and SCSS. I am in the mobile-phase of development and I quickly discovered (for this project) that I needed a way to target multiple breakpoints using a #media query. So I found via this SO answer and this CSS Tricks Post as well as multiple other answers on SO. Then I implemented the solutions I found into a test-case, see snippet below for the test.
main {
background-color: grey;
height: 100%;
min-height: 1000px;
#media (max-width: 992px) {
background-color: red
}
#media (max-width: 768px) {
background-color: lightcoral
}
#media (max-width: 992px), (max-width: 992px) and (orientation: landscape) {
background-color: lightgreen;
}
#media (max-width: 768px),
(max-width: 768px) and (orientation: landscape) {
background-color: lightblue;
// Reset the min-height here, because we no longer have the sticky search bar.
min-height: 450px;
}
}
<main>
<h1>Page Title</h1>
<h2>Some Descriptive information</h2>
<div>Content</div>
</main>
But I haven't been able to get it to work. What I am trying to do, ultimately, is have styles that are applied when the user is in landscape on a tablet, or phone. However, I don't know if I am doing it right, or using the or operator correctly.
It plain doesn't work, well, the first statement (for example: (max-width: 992px)) works, but the second one doesn't evaluate to true. According to Mozilla:
Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. --- Mozilla Documentation
Even if I break the code into two separate media queries:
#media (max-width: 992px) {
background-color: lightgreen;
}
#media (max-width: 992px) and (orientation: landscape) {
background-color: lightgreen;
}
It still doesn't work. So I don't know if I am targeting the wrong width (when in landscape) or what I am doing wrong. Can any other Front-End developers out there tell me why my comma seperated media queries aren't working?
EDIT: Here is the native SCSS code:
main {
background-color: $mono-90;
height: 100%;
min-height: 1000px;
#media screen and (max-width: map_get($grid-breakpoints, 'md')) {
// Reset the min-height here, because we no longer have the sticky search bar.
min-height: 450px;
}
#media
(max-width: map_get($grid-breakpoints, 'lg')),
(max-width: map_get($grid-breakpoints, 'lg')) and (orientation: landscape){
background-color: lightgreen;
}
#media
(max-width: map_get($grid-breakpoints, 'md')),
(max-width: map_get($grid-breakpoints, 'md')) and (orientation: landscape){
background-color: lightblue;
}
#media
(max-width: map_get($grid-breakpoints, 'sm')),
(max-width: map_get($grid-breakpoints, 'sm')) and (orientation: landscape){
background-color: lightcoral;
}
}
EDIT: Per the recommendation of #Godwin, I simplified my #media queries to this:
main {
background-color: $mono-90;
height: 100%;
min-height: 1000px;
#media screen and (max-width: map_get($grid-breakpoints, 'md')) {
// Reset the min-height here, because we no longer have the sticky search bar.
min-height: 450px;
}
#media screen and (max-width: map_get($grid-breakpoints, 'lg')) {
background-color: lightgreen;
}
#media screen and (max-width: map_get($grid-breakpoints, 'md')) {
background-color: lightblue;
}
#media screen and (max-width: map_get($grid-breakpoints, 'sm')) {
background-color: lightcoral;
}
}
However, it doesn't work on iPad Landscape (1024x768). I don't want it to show on Laptops, but do want it to show on iPads in Landscape position.
However, it doesn't work on iPad Landscape (1024x768). I don't want it to show on Laptops, but do want it to show on iPads in Landscape position.
I'm not sure what you're defining by it since you're not hiding anything in your examples so I'm gonna refer to:
What I am trying to do, ultimately, is have styles that are applied when the user is in landscape on a tablet, or phone.
Orientation on MDM is defined as the following:
This value does not correspond to actual device orientation.
It just indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.
You said your iPad in landscape has a resolution of 1024x768, so to target an iPad or a phone in landscape mode, you can set a media query targeting all devices having a maximum width of 1024px and being in landscape mode (the display is wider than it is tall):
main {
background-color: grey;
height: 100%;
min-height: 1000px;
width: 100%;
#media screen and (max-width: 1024px) and (orientation: landscape) {
background-color: lightblue;
}
}
You can check an example on this codepen.
If your viewport has a width greater than 1024px, the main element will be grey no matter what.
If you resize your browser window to have a viewport with a width equal or less than 1024px, and have a viewport considered in landscape (the display is wider than it is tall), for example an iPad in landscape mode (1024x768), the media query will trigger and apply a blue background:
If you resize your browser window to still have a viewport with a with equal or less than 1024px but have an height greater than your width, the viewport is no longer considered to be in landscape mode but switch to portrait mode. At this time, the media query is no longer be triggered and we fallback to a grey element:
So regarding your question, the example is a media query to apply styles to the user using a tablet or phone in landscape mode.
Here is a solution .Hope this will work for you
main {
background-color: grey;
height: 100%;
min-height: 1000px;
}
#media (max-width: 992px) and (orientation:portrait) {
main{
background-color: red
}
}
#media (max-width: 768px) and (orientation:portrait) {
main{
background-color: lightcoral
}
}
#media (max-width: 992px) and (orientation: landscape) {
main{
background-color: lightgreen;
}
}
#media (max-width: 768px) and (orientation: landscape) {
main{
background-color: lightblue;
min-height: 450px;
}
}
<main>
<h1>Page Title</h1>
<h2>Some Descriptive information</h2>
<div>Content</div>
</main>
I've literally wasted the entire day trying to figure this out.
When I resize my browser to anything of lesser width than 778px, the screen goes black. (any height works, just width doesn't configure)
What i would like to do is add a mobile #media setting that actually displays what I currently have!
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
any ideas what's wrong with my code? I've been rain-man'ing through my css..
Code: http://jsfiddle.net/jwrg5/
Much appreciated!
Here is a clinical example for applying media queries (Fiddle):
#media (max-width: 480px) {
body {
background: red;
}
}
#media (min-width: 481px) {
body {
background: blue;
}
}
The stylesheet functions as follows:
When your viewport is wider than 480 pixels, blue background is rendered
Narrower viewports are rendered red.
Note that there is a difference between using max-width and max-device-width. The latter gives you the maximum device width, which does not allow you to as easily test your queries by resizing your browser window.
I have this problem...I am running page http://exploreprague.cz. In the right upper corner I have ribbon. But when I am looking on it on my tablet, its's overlapping my menu. So I figured that if there is way to show different picture(different kind of ribbon, not just differently styled) it could work. But I don't know if there is some kind of HTML/CSS/JS trick which can do it. Thanks
One of the better ways to achieve what you want would be to use CSS3 Media queries.
In the CSS file targeted at tablet-sized resolutions, you could set display:none on that particular image, and replace it with a new image that fits in with your smaller resolution better if you prefer.
For example (iPad portrait/landscape resolution):
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#oldImg { display:none; }
#newImg { display:block; }
}
Here is an example of how to use a responsive css:
Large desktop
#media (min-width: 1200px) {
#largeImage{
display: inline;
}
#smallImage{
display: none;
}
}
Portrait tablet to landscape and desktop
#media (min-width: 768px) and (max-width: 979px) {
#largeImage{
display: none;
}
#smallImage{
display: inline;
}
}
Landscape phone to portrait tablet
#media (max-width: 767px) {
/* do the same as tablets or include this width range in the tablet style*/
}
Landscape phones and down
#media (max-width: 480px) {
/* do the same as tablets or include this width range in the tablet style*/}
Just set the image display property according to the width of the screen.
use 2 images one with
display: none;
and the other with:
display: inline;
and switch between them on a narrower screen