Responsive design with media query screen size

Question

I m working on responsive designed web site using media queries  But i do not know  how to take a good width set      As you can see on this table  there is a lot of different resolution even for a single type of device  And as resolution is coming bigger and bigger on mobile device  it is hard to know what design to apply for a specific resolution    For now  I m using this    Mobile First   media screen and  min-width 720px     Phablet   media screen and  min-width 768px     Tablet   media screen and  min-width 1024px     Desktop  Thank you for any advice or recomendations

User · Accepted Answer

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   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  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

User · Answer

Take a look at this    http   getbootstrap com   For big websites I use Bootstrap and sometimes  for simple websites  I create all the style with some  mediaqueries  It s very simple  just think all the code in percentage    container   max-width  1200px  width  100   margin  0 auto      Inside the container  your structure must have widths in percentage like this      col-1   width  40   float  left      col-2   width  60   float  left      media screen and  max-width  320px     col-1   col-2   width  100         In some simple interfaces  if you start to develop the project in this way  you will have great chances to have a fully responsive site using break points only to adjust the flow of objects

User · Answer

Here is media queries for common device breakpoints          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                  iPad 3              media only screen and  min-device-width   768px  and  max-device-width   1024px  and  orientation   landscape  and  -webkit-min-device-pixel-ratio   2       Styles        media only screen and  min-device-width   768px  and  max-device-width   1024px  and  orientation   portrait  and  -webkit-min-device-pixel-ratio   2       Styles         Desktops and laptops -----------     media only screen  and  min-width   1224px       Styles          Large screens -----------     media only screen  and  min-width   1824px       Styles          iPhone 4 -----------     media only screen and  min-device-width   320px  and  max-device-width   480px  and  orientation   landscape  and  -webkit-min-device-pixel-ratio   2       Styles        media only screen and  min-device-width   320px  and  max-device-width   480px  and  orientation   portrait  and  -webkit-min-device-pixel-ratio   2       Styles

User · Answer

The screen widths Bootstrap v3 x uses are as follows    Extra small devices Phones   lt 768px     col-xs- Small devices Tablets   768px     col-sm- Medium devices Desktops   992px     col-md- Large devices Desktops   1200px     col-lg-   So  these are good to use and work well in practice

User · Answer

i will provide mine because  muni s solution was a bit overkill for me  note  if you want to add custom definitions for several resolutions together  say something like this     mobile generally      media screen and  max-width  1199             irns-desktop          display  none                  irns-mobile          display  initial                   Be sure to add those definitions on top of the accurate definitions  so it cascades correctly  e g   smartphone portrait  must win versus  mobile generally      here all definitions to apply globally     desktop  media only screen and  min-width   1200           tablet landscape  media screen and  min-width  1024px  and  max-width  1600px           end media query    tablet portrait  media screen and  min-width  768px  and  max-width  1023px         end media definition     smartphone landscape  media screen and  min-width  480px  and  max-width  767px         end media query      smartphone portrait  media screen   and  min-width  320px    and  max-width  479px          end media query

[css] Responsive design with media query : screen size?

Examples related to css

Examples related to responsive-design

Examples related to media-queries

Examples related to mobile-website

Examples related to screen-resolution