I'm not fully sure how this should work on desktops, but I'm pretty sure that when you resize the browser, the orientation should change (provided the height was bigger than the width and after resizing it's the other way round).
So that said, I have no idea why the following code only comes in effect on pageload.
#media all and (orientation: portrait) {
.slider-slide {
background-size: auto 100% !important;
}
}
#media all and (orientation: landscape) {
.slider-slide {
background-size: 100% auto !important;
}
}
Basically what I want this code to do is to resize a background image based on the orientation. If I have the page resized properly on pageload, both work, but when I resize the window on the fly, it doesn't work. Any ideas?
Fabrizio Calderan's solution is the best for the given use case, but if you need to detect changing to/from portrait and landscape, the answer to the original question is, yes, this will work.
You can see http://robertnyman.com/css3/media-queries/media-queries.html for a working sample.
The primary difference I see is that Robert used screen instead of all. So:
#media screen and (orientation: portrait) {
...
}
Beyond that there are probably some differences in browsers. Robert's solution worked for me in Chrome and FF. I am not sure about other browsers. (on a side note, there has to be a better caniuse than caniuse.com :) )
Related
Whenever I press ctrl+shift+m to enter responsive design mode in Firefox, it shows the screen dimensions in the upper left, but if I see 992px as the width here and then create this media query:
#media (min-width: 992px) {
/*stuff to happen at 992px*/
}
, the stuff that is supposed to happen at 992px actually happens at 1082px, according to Firefox. Why is this? Is there a way to get Firefox's measurements to match exactly with the results that media queries produce?
Additionally, stuff that is supposed to happen at 768px according to the media query appears to be happening at 838px.
The answer was that the amount of zoom in Firefox messes with the responsive design mode measurements. Apparently, the dimensions shown in responsive design mode aren't the virtual dimensions of the website but are instead the screen dimensions, so they don't change when Firefox is zoomed in or out.
Try this code:
#media (max-width: 992px) {
/*stuff to happen at 992px*/
body{
background: #000;
}
}
Instead of
#media (min-width: 992px) {
/*stuff to happen at 992px*/
}
In Firefox, Make Sure while testing for website responsiveness , the browser zoom setting to be 100% only. It effects the screen width shown to you in RDM (Responsive Design Mode).
I am not sure about others but i got same issue earlier.
I need to do a respponsive website project and Im with some doubts.
Im studying media queries but there are a lot of media queries, there are something like "default media queries" or "common media queries" that we can follow?
After some research Im thinking something about this:
#media only screen and (min-width: 480px) { ... }
#media only screen and (min-width: 600px) { ... }
#media only screen and (min-width: 768px) { ... }
#media only screen and (min-width: 992px) { ... }
#media only screen and (min-width: 1382px) { ... }
Do you think that are a good approach using this media queries?
And do for responsiv design do you think its better use percentages in css or its better using pixels? Im asking this, because the media queries use pixels, so maybe its better dont use percentages?
And for last, I have a computer with full hd resolution and other with 1024 resolution. I have a image that have 300 pixels, in my full hd monitor the image is more smaller than my 1024 computer. I dont understand this, because 300pixels should be 300 pixels always no?
Sorry if I ask many things, but Im with some doubts and its not easy find good and reliable information about this!
I thnk using the media query settings you note will complicate your life because they will make it difficult to target different viewports or window widths.
#media only screen and (min-width: 480px) { ... } will target all widths 480px and above,
#media only screen and (min-width: 600px) { ... } will target all widths 600px and above.
So they will both be fighting for control whenever the viewport is 600px or higher. You could consider something like the following:
/* your default, site-wide settings followed by */
#media only screen and (max-width: 480px) { ... }
#media only screen and (min-width: 481px) and (max-width: 600px) { ... }
#media only screen and (min-width: 601px) and (max-width: 768px) { ... }
#media only screen and (min-width: 769px) and (max-width: 992px) { ... }
#media only screen and (min-width: 993px) { ... }
I'm not saying that these are perfect break points, that's often specific to your design. The important bit is the technique you use to target the different viewports.
There are different schools of thought for pixels vs percentages, and both have advantages. If you are getting up-to-speed with responsive design, personally I think it's worth spending time with some of the well established frameworks like Bootstrap or Foundation or Skeleton or one of the many others.
They are all fantastic, they will save you heaps of learning time, give you good cross-browser results, and the more you know, the easier it will be to break away from them when needed.
Good luck!
What's pixel density and how it can help me to understand why the same image can be smaller on my mobile phone than it is on my computer monitor (and vice-versa)?
Let's say that I have a monitor with a 500 x 500 pixels resolution, the screen size of this monitor is 15" diagonally and I have a mobile phone that has the same resolution but it's screen size is 4" diagonally (just an example).
How is it possible to fit the same number of pixels in different screen sizes?
The answer is simple: The pixel is smaller on my phone than it is on my monitor (that's the big difference between Apple's retina display and other displays).
Media Queries...
Take a look in a very simple blog that I've developed last year. Try resizing your browser width to see what happens to the content, images and slideshow.
When the browser/screen width is smaller than 800 pixels, the entire site changes to adapt itself better to smaller screens. This is how I think you should use media queries, instead of creating rules for each device screen size (but not necessarily using 800px nor limiting the content max-width when it's on a big screen).
Note that this is just an example on how you should think about media queries.
here is some reference for you:
about media queries you can read http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/ - i love this quote
Start with the small screen first, then expand until it looks like
shit. Time for a breakpoint! -Stephen Hay
basically you should use a fluid layout (you can choose from a variety of css fluid grids you find online) and test your design enlarging and shrinking your browser: when your design "cracks", it's time to add a mediaquery. you don't have readapt the whole website at a certain breakpoint: everything may work ok and you need only to resize the text at that certain width. do so.
about pixel density and resolutionyou can read this useful article: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
hope this helps
You should probably stop thinking about the web in pixels and screen sizes.
I can see why it's tempting to use actual device widths as breakpoints for a design, but do keep in mind that those breakpoints will be invalid the very second a new device is released. Or when the user interacts with the site in an unexpected way, such as resizing the text size to their preference.
Use the em unit for your breakpoints. This way, your media queries will trigger correctly even when a user resizes the text size.
Adjust your breakpoints to when your content/layout needs it, not for for specific screen sizes (that said, you should probably not include compact (mobile) navigation above 980-ish pixels, since people with old monitors probably won't understand how to navigate through it).
Write mobile first CSS, as in use min-width for your media queries. This helps you keep your CSS DRY. However that does not mean that you never should use max-width for media queries - there are always scenarios when you want to add styles to smaller screens only. Always avoid repetition.
For your own sanity, use a CSS preprocessor such as SASS, LESS or Stylus. I recently wrote an answer on how to use SASS to get a really comfortable workflow with media queries, click here here to read it.
Pixel density is a complicated topic, but rendered pixels (such as an image, or anything with CSS) aren't the same as actual pixels on a screen - they're normalized to a standard. For that reason, you shouldn't use pixel density to increase the quality of images, you should just increase the width of the image since those additional pixels then will be crammed into place on higher resolution screens.
Pleas Try Following media queries:-
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
On this site: http://goo.gl/VNct8O I made a widget for available payment methods. All the logos in it are expected to be retina ready.
I used coolrunnings to develop the sprites using spriteme service.
However, when I zoom to 200% in chrome all logos looks stretched. Positions are correct, just the images are stretched. How can understand what's wrong...
I dont have a ton of experience with Retina but this might help, i think you need to use a media query for it
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
Here is a good article about it http://css-tricks.com/snippets/css/retina-display-media-query/
Changing the background-size to 64px 584px; on your ul.accepted-payment-methods li.american-express span class resolves the stretching. From there, just adjust each payment type's background-position and you should be good to go.
Is there a way using css3 media queries in which you can change design in landscape and portrait.
So I want to check that effect. But how I can use in desktop. Is there any tool where I can use this effect like in jsfiddle?
Media queries respond to the size of the screen/viewport. Just resize your browser window.
Hi this is an example of css media queries, just resize the page
JSFIDDLE or this one
#media (max-width: 400px) {
.responsive-test {
width: 1px;
}
}
Here is a Codepen! Try resizing your browser width to less than 600px
Try this Chrome extension: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
I use it and it's very good.
i am new to web development. terrible at math as well
i was wondering how does pixels translated from one screen size to the other on a webpage. Say for example, I specify
margin-left: 50px;
if i load this web page in my ipad webview, i measured it (using a ruler software, in px) it is indeed 50px
if i load this webpage in my desktop browser, it is indeed 50px
but when load this webpage in my iphone webview (which takes entire iphone screen), it is measured as 40px, not 50 as i specified.
sure iphone screen is smaller, it needs to do some scaling i guess..? is that right?
how is this conversion done? what is the process? is there some sort of formula?
what does this mean for designers? how do i know the right size i should assign, so the layout does NOT break on all screens?
i generally code on bigger screen first, then see how it runs on the smaller screen. is this the right approach.
i want a good and big answer for #2, can someone please help
Do you have overwritten the margin of body? Some browser have different default values. If you look at the IE6 you will find something like this:
"IE 6 default margin on body is 15px (top and bottom) 10px (left and right)"
It is a good practise to have a css-file with some default values the reset the browser defaults.
I would highly suggest that you look into relative sizes...it will be relative to the device. Check out any article about Responsive Web Design. Hard pixel values are a no-no, if you get the percentages and relative sizes it generally fixes a lot of issues. Now if you are new to web development you will want to do some learning before diving into responsive. You can also probably do a little studying on media queries. Just media query it for a temporary solution.
I would suggest you look into jQuery Mobile and viewports. Basically you need to set everything by percentages not fixed width because each device has different screen size + you need to consider horizontal vs vertical view.
This viewport meta makes sure that the page is sized to 100% of screen width in any case:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
#media (min-width: 1200px) {
#media (max-width: 980px) {
#media (max-width: 979px) {
#media (min-width: 980px) {
#media (min-width: 768px) and (max-width: 979px){
#media (max-width: 768px) {
#media (max-width: 767px) {
#media (max-width: 480px) {
Taken from Joomla 3.0