search

ryanve / response.js

Responsive design toolkit
http://responsejs.com
Other
801 stars 123 forks source link

Response.js Default Media Queries Breakpoints #23

Closed mdmoura closed 11 years ago

mdmoura commented 11 years ago

Hello,

I am working on a responsive web site and using Response.js.

I am trying to set default media queries breakpoints for my projects.

I found that the default Response.js media queries breakpoints are:

0; 320; 481; 641; 961; 1025; 1281

I think they could be described as:

320: Smartphone Portrait 481: Smartphone Landscape 641: ??? 961: Desktop and Laptop ??? 1025: Wide Screen Desktop and Laptop 1281: Even Wider Screen Desktop and Laptop

I am not sure about where IPAD fits. And why 641 px? Should not be 768 px for IPAD?

I was reading the following: http://alpha.responsivedesign.is/develop/media-queries/media-queries-for-common-device-breakpoints

And it seems 768px is used in IPads.

Could someone help me deciding a default list of breakpoints for Response-js?

Thank You, Miguel

ryanve commented 11 years ago

The defaults are based on 960 grids and on what seemed common across many devices. They are set 1px higher because they are meant for use along with mobile-first min-width media queries rather than max-width ones. Choose breakpoints based on what you need in your design. Breakpoints are subjective.