Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS media queries for screen sizes

I am currently trying to design a layout which will be compatible for multiple screen sizes. The screen sizes I am designing for are listed below:

Screen Sizes:

  1. 640x480
  2. 800x600
  3. 1024x768
  4. 1280x1024 (and larger)

The thing that I'm having trouble with is creating the css3 media queries, so that my layout changes when the window's width gets to one of these widths. Below is an example of the media queries I'm currently using, but it is not working for me, so I'm wondering if someone could help me fix it.

<link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/devices/screen/layout-modify1.css"> <link rel="stylesheet" type="text/css" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/devices/screen/layout-modify2.css"> <link rel="stylesheet" type="text/css" media="screen and (max-width: 901px)" href="css/devices/screen/layout-modify3.css"> 

I tried going with a new set of media queries, but they still aren't working for me. Could someone please help explain what I'm dong wrong. Several of you have already tried explaining, but I'm not getting it. The new media queries are displayed below:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 640px)" href="css/devices/screen/layout-modify1.css">      <link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="css/devices/screen/layout-modify2.css">      <link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/devices/screen/layout-modify3.css">      <link rel="stylesheet" type="text/css" media="screen and (max-width: 1280px)" href="css/devices/screen/layout-modify4.css"> 
like image 494
JaPerk14 Avatar asked Dec 12 '12 20:12

JaPerk14


People also ask

How do you give min and max width in media query?

If you want to include both min and max width for responsiveness in the browser, then you can use the following: @media (min-width: 768px) and (max-width: 992px){...} @media (min-width: 480px) and (max-width: 767px) {...}

How do you use media query for width?

Take a look: @media only screen and (min-width: 360px) and (max-width: 768px) { // do something in this width range. } The media query above will only work for the feature expression (the screen size of the mobile device that you're writing a style for) provided above.

What is max width in media query?

The max-width media feature states the maximum width of a particular device. For instance, the maximum screen width of mobile devices is 480px. Consult the example below to understand it in a better way. Example. @media screen and (max-width: 700px) {


2 Answers

Put it all in one document and use this:

/* Smartphones (portrait and landscape) ----------- */ @media only screen  and (min-device-width : 320px)  and (max-device-width : 480px) {   /* Styles */ }  /* Smartphones (landscape) ----------- */ @media only screen  and (min-width : 321px) {   /* Styles */ }  /* Smartphones (portrait) ----------- */ @media only screen  and (max-width : 320px) {   /* Styles */ }  /* iPads (portrait and landscape) ----------- */ @media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px) {   /* Styles */ }  /* iPads (landscape) ----------- */ @media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  and (orientation : landscape) {   /* Styles */ }  /* iPads (portrait) ----------- */ @media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  and (orientation : portrait) {   /* Styles */ }  /* Desktops and laptops ----------- */ @media only screen  and (min-width : 1224px) {   /* Styles */ }  /* Large screens ----------- */ @media only screen  and (min-width : 1824px) {   /* Styles */ }  /* iPhone 4 - 5s ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {   /* Styles */ }  /* iPhone 6 ----------- */ @media only screen and (max-device-width: 667px)  only screen and (-webkit-device-pixel-ratio: 2) {   /* Styles */ }  /* iPhone 6+ ----------- */ @media only screen and (min-device-width : 414px)  only screen and (-webkit-device-pixel-ratio: 3) {   /*** You've spent way too much on a phone ***/ }  /* Samsung Galaxy S7 Edge ----------- */ @media only screen and (-webkit-min-device-pixel-ratio: 3), and (min-resolution: 192dpi)and (max-width:640px) {  /* Styles */ } 

Source: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

At this point, I would definitely consider using em values instead of pixels. For more information, check this post: https://zellwk.com/blog/media-query-units/.

like image 114
Oliver Tappin Avatar answered Oct 25 '22 15:10

Oliver Tappin


Unless you have more style sheets than that, you've messed up your break points:

#1 (max-width: 700px) #2 (min-width: 701px) and (max-width: 900px) #3 (max-width: 901px) 

The 3rd media query is probably meant to be min-width: 901px. Right now, it overlaps #1 and #2, and only controls the page layout by itself when the screen is exactly 901px wide.

Edit for updated question:

(max-width: 640px) (max-width: 800px) (max-width: 1024px) (max-width: 1280px) 

Media queries aren't like catch or if/else statements. If any of the conditions match, then it will apply all of the styles from each media query it matched. If you only specify a min-width for all of your media queries, it's possible that some or all of the media queries are matched. In your case, a device that's 640px wide matches all 4 of your media queries, so all for style sheets are loaded. What you are most likely looking for is this:

(max-width: 640px) (min-width: 641px) and (max-width: 800px) (min-width: 801px) and (max-width: 1024px) (min-width: 1025px) 

Now there's no overlap. The styles will only apply if the device's width falls between the widths specified.

like image 29
cimmanon Avatar answered Oct 25 '22 14:10

cimmanon