Responsive Design with Media Query:Screen Size

Responsive design with media query : screen size?

Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience

When you design your responsive website you should consider the size of the screen and not the device type. The media queries helps you do that.

If you want to style your site per device, you can use the user agent value, but this is not recommended since you'll have to work hard to maintain your code for new devices, new browsers, browsers versions etc while when using the screen size, all of this does not matter.

You can see some standard resolutions in this link.

BUT, in my opinion, you should first design your website layout, and only then adjust it with media queries to fit possible screen sizes.

Why? As I said before, the screen resolutions variety is big and if you'll design a mobile version that is targeted to 320px your site won't be optimized to 350px screens or 400px screens.

TIPS

1. When designing a responsive page, open it in your desktop browser and change the width of the browser to see how the width of the screen affects your layout and style.
2. Use percentage instead of pixels, it will make your work easier.

Example

I have a table with 5 columns. The data looks good when the screen size is bigger than 600px so I add a breakpoint at 600px and hides 1 less important column when the screen size is smaller. Devices with big screens such as desktops and tablets will display all the data, while mobile phones with small screens will display part of the data.

---

State of mind

Not directly related to the question but important aspect in responsive design.
Responsive design also relate to the fact that the user have a different state of mind when using a mobile phone or a desktop. For example, when you open your bank's site in the evening and check your stocks you want as much data on the screen. When you open the same page in the your lunch break your probably want to see few important details and not all the graphs of last year.

Responsive design with media query

Instead of trying to figure out which screen size to detect, maybe you could approach the problem from a different angle.

One of the main reasons for using responsive desing is so your site will will display well on all devices, so look at your specific design and examine what happens to your design and page layout as you change the window size (both width and height).

Maybe you'll be lucky and have a fluid design that reconfigures well, then it's possible that you won't even need to use @media queries.

It's more likely that at certain viewports or window sizes the design will breakdown though and this is where @media queries come in.

There are no hard and fast rules for which breakbpoints you use for @media queries, as a starting point Foundation uses

/* Very large screens */
@media only screen and (min-width: 1441px) { ... }

/* Medium screens */
@media only screen and (max-width: 1279px) and (min-width: 768px) { ... }

/* Small screens */
@media only screen and (max-width: 767px) { ... }  

/* Landscape Orientation */
@media screen and (orientation: landscape) { ... }

/* Portrait Orientation */
@media screen and (orientation: portrait) { ... }

Maybe you'll want to add a rule for smaller screens, but this is probably as good as any.

Remember that @media queries are there to help when your design breaks and hopefully you won't have to define a lot of rules at every breakpoint.

Good luck!

Responsive Design - 320 & up - how to use media queries?

You should write your CSS first without those Media Queries. Actually you should just ignore those Media Queries.

Once you've got your 'mobile' CSS in place (having your browser window real small) you start resizing your browser window. The moment things are starting to look odd, for instance, too much white-space, lines getting to long, you add a new Media Query for that min-width.

Within the new Media Query you adjust for the odd looking things and once you've done that start scaling up again, keep doing this till you reach a point where you think you've got enough screen real estate covered.

There is no one device width as there are thousands of different devices out there so you can't decide on your breakpoints before actually seeing your design in action.

What is the media query for large desktops?

The challenges of optimizing for large-scale displays center around how to scale and manage content.
You need to assume screen width at certain points.

Example: for class "container"

@media screen and (min-width: 1400px) {
  .container {
    width: 1370px;
  }
}
@media screen and (min-width: 1600px) {
  .container {
    width: 1570px;
  }
}
@media screen and (min-width: 1900px) {
  .container {
    width: 1870px;
  }
}

---

Related Topics