Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
What do you recommended should be the widths I should use for a responsive layout?
/* Default Width: */
.container { width: 940px; margin: 0 auto; }
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
I've started using "320 and up"'s widths which are as follows:
Note that they go from small to large not the other way around though. This is more in line with progressive enhancement and definitely preferred anyway:
Brad Frost - mobile-first responsive web design
stuffandnonsense.co.uk - 320 and Up
// Default styling here
// Little larger screen
#media only screen and (min-width: 480px) {
}
// Pads and larger phones
#media only screen and (min-width: 600px) {
}
// Larger pads
#media only screen and (min-width: 768px) {
}
// Horizontal pads and laptops
#media only screen and (min-width: 992px) {
}
// Really large screens
#media only screen and (min-width: 1382px) {
}
// 2X size (iPhone 4 etc)
#media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(-o-min-device-pixel-ratio: 3/2), only screen and
(min-device-pixel-ratio: 1.5) {
}
If you use Sass, here's a little trick I've been using:
$laptop-size: "only screen and (min-width: 768px)";
$desktop-size: "only screen and (min-width: 1382px)";
// etc
And then
#media #{$laptop-size} {
// Styling here...
}
This way you can easily change widths in one place also you don't have to write the whole thing every time.
There is no recommended width for responsive layout. It's totally depends upon your layout structure. Layout Structure means use MEDIAQUERIES when you want any specific changes on an specific width or when your layout broke any specific screen width.
If you are looking for best/common practices and particular widths applied when using responsive layouts, I'd suggest you look into grid systems readily available. A quick google search yields a lot of results, but one of my favourite ones would be the 1140 grid from cssgrid.net (site no longer available) - I very much agree with their logic on choosing the measurements. Verbatim:
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors
it becomes fluid and adapts to the width of the browser.
Scrap 1024! Design once at 1140 for 1280, and with very little extra
work, it will adapt itself to work on just about any monitor, even
mobile.
If this is not the kind of answer you were looking for, please rephrase the question.
Related
I am doing my first steps in repsonsive design world.
I found out that the most recommended way is to use min-width and max-width to find out the size of the display area, like this:
#media (max-width: 1200px) { ... } /* for desktops */
#media (max-width: 991px) { ... } /* for laptops */
#media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
#media (max-width: 768px) { ... } /* for smaller tablets */
#media (max-width: 500px) { ... } /* for cellphones */
The problem is that newer phones have high density screens. My phone has width of 980px. Therefore it loads wrong CSS which is meant for larger screens.
I tried out max-device-width. It takes into account logical pixels and my phone width is 393 of those. It worked. But max-device-width is deprecated so i don't want to use it.
I found some examples of min-resolution and max-resolution as well.
It is also possible to use JavaScript to determine if the browser is mobile browser, but it doesn't seem to be the correct approach.
So I got kind of confused. Please give me hints what and how should I use to determine if the site is running on a mobile device and how to load the correct CSS for it. How it has to be done in correct and reliable way?
Thank you in advance.
first at all, the way you use it, wouldnt work well. For example:
#media (max-width: 1200px) { ... } /* for desktops */
#media (max-width: 991px) { ... } /* for laptops */
if a screen has the width of 900px, then both media queries would apply. Because 900px is below 1200px and below 991px. For that specific case your media queries should be as follow:
/* for desktops */
#media only screen
and (min-width: 1367px) {
...
}
/* for laptops */
#media only screen
and (min-width: 991px)
and (max-width: 1366px) {
...
}
/* for large tablets */
#media only screen
and (min-width: 769px)
and (max-width: 990px) {
...
}
/* for smaller tablets */
#media only screen
and (min-width: 481px)
and (max-width: 768px) {
...
}
/* for cellphones */
#media only screen
and (max-width: 480px) {
...
}
as you noticed, it should contain min and max width unless its the lwoer or top end (desktop and smartphones) the smallest smartphone size is 320px btw.
Also I changed the media queries to screen only, its just good practise as you want to address screens only.
Screen size:
Notice the difference between Hardware pixels and viewport Pixels. your phone might have something above 900 hardware pixels but onyl half or a quarter of it as viewport pixels.
Hardware pixels are the pixels that a device has physically and viewport pixels the pixels which can bea dressed by css.
The reason is, that the ahdrware pixels are not actually adressable is for sharpness. besides, it owuld be nearly unreadably otehrwise.
Edit: The cheap laptops screen panels have a resolution of 1366 x 768px. so the laptop width should be also set to 1366px.
There is a difference between device pixels and CSS pixels. On many screens they are treated the same, but on high DPI screens there can be several device pixels per CSS pixel. See this page on MDN for more reading.
To control the width in CSS pixels, use the viewport meta tag in your HTML. This tag is generally only interpreted on mobile devices so it shouldn't affect your site on desktop browsers. It specifies the minimum width at which your site will be displayed.
For example, to set your site to display at a minimum width of 500px on mobile, use:
<meta name="viewport" content="width=500, initial-scale=1">
To display the site at the browser's width use:
<meta name="viewport" content="width=device-width">
In addition to the MDN article, the following article may be helpful for setting display widths for tablets.
For responsive design, it's recommended to use Mobile First approach. You start with styling the mobile version and change it while the viewport grows.
With the following media queries you have different problems:
#media (max-width: 1200px) { ... } /* for desktops */
#media (max-width: 991px) { ... } /* will match laptops and desktop because your screen with is underr 991 but also under 1200px */
#media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
#media (max-width: 768px) { ... }
#media (max-width: 500px) { ... }
the correct approach should be
// you start with mobile version
#media (min-width: 500px) { ... } // will match only screen width >= 500px
#media (max-width: 768px) { ... } // will match only screen width >= 768px
#media (min-width: 768px) and (max-width: 990px) { ... } // will match only screen width >= 768px and < 900px (could be tablets also)
#media (min-width: 991px) { ... } // match also ipad on landscape mode
#media (min-width: 1200px) { ... } /* for desktops */
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
What are some common Breakpoints to achieve the responsive layout for web pages
I use basically
#media screen and (max-width: 480px) {
}
#media screen and (min-resolution: 150dpi) {
}
#media screen and (max-resolution: 300dpi) {
}
#media screen and (min-width: 150px) {
}
#media screen and (min-height: 100px){
}
#media screen and (max-height: 450px) {
}
I'm using above mentioned breakpoints but could not achieve complete responsive layout
Major Breakpoints
As a developer we need to adapt design to three type of device (mobile, tablet, and desktop). You should use at least 3breakpoints for the most device flexibility.
Following are some major breakpoints
These breakpoints i mostly use:
0 - 600px: Phone
600 - 900px: Tablet portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + : Big desktop
Visit to see statistics, these are the 6 most common screen sizes
It is up to you and the usage of your website. Most of the websites designed today uses mobile first approach. The breakpoints can be same as bootstrap uses.
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
I have recently been learning about responsive web design. What I am trying to achieve is presented on the images below, one is for how the website should look like on desktop, and the other one is for mobiles devices.
So as you can see, there are four boxes. After clicking the box, in the textbox you will see some text referring to that box. What I have been thinking about is how to deal with this layout. Is it just the Media Queries and different CSS styling depending on the screen resolution? Or should i somehow (jquery?) switch the elements order in the DOM? Im not sure how to handle this. Thanks for any advice!
To expand on #D.Fraga's comment, the css #media rule could be used as follows:
#media screen and (min-width: 480px)
/* css for large device */
/* */
}
#media screen and (max-width: 480px) {
/* css for small device */
/* */
}
You have 2 sets of css, one for rendering larger devices, the other for smaller.
You may also considering using javascript screen.width with some sort of framework (i.e. angularjs) to dynamically render DOM elements based on screen size (though I highly recommend the former).
This can be solved with css only:
#media (max-width: 420px){
/* Your Code */
}
Study #media of CSS
If you use these media queries for different screen views, maybe your problem will be solved.
Media query for large devices like laptops, desktops with screen size 1025px to 1280px
#media (min-width: 1025px) and (max-width: 1280px) {
//Your css here
}
Media query for tablets, mobile (Landscape Layout) with screen size 481px to 767px
#media (min-width: 481px) and (max-width: 767px) {
//Your css here
}
Media query for smartphone mobile (Portrait Layout) with screen size 320px to 479px
#media (min-width: 320px) and (max-width: 480px) {
// Your css here
}
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
Above is Foundation Framework Standard Break Points.
For Mobile it is Seen the break Point is max-width of 640, What if Design Provided to me for mobile is greater than 640 & same is Case for Destkop & tablet. Does it make a sense in changing the Foundation breakpoints wrt to design provided? An answer with proper reasoning would be helpful.
Of course that make sense, you can adapt the framework to your project needs; most of time you can use the existing breakpoints (what Zurb have defined according to their most-of-time scenarios), but you can adapt if your project has specific needs, you can do it.
What I'd recommend to you, is not to use the basic foundation package (precompiled), but use any "sass customizable" version instead (you can do that trough a lot of package managers), so you'll have full control of the framework, through customizing variables.
In Foundation's settings file, section d., you can edit the media query ranges (a.k.a. the breakpoint ranges), next time you compile the framework, you'll have the breakpoints just as you need them.
my layout works fine in big monitors....
but i am trying to display properly in small screen laptops....
which width should i need to use it in the css media queries for the 13 inch monitor...
i am confused abt width for 13 inch laptop
#media (min-width: 768px) and (max-width: 979px) {
#media (max-width: 767px) {
#media (min-width: 1200px) {
#media (min-width: 768px) and (max-width: 979px) {
#media (max-width: 767px) {
#media (max-width: 480px) {
#media (max-width: 979px) {
#media (min-width: 980px) {
Most 13" monitors are going to be larger than 960px or even larger than 1140px wide. 960px wide is kind of an old standard, more often now 1140px is used, especially for responsive design.
That said, only a netbook with a 8" or 9" screen will have issues displaying. Every 13" monitor I know of should not have any issues displaying your web page. If you want to design for the netbook, they are similar in resolution to most tablets in portrait position. So if you are doing media queries for tablet and mobile phone, then the netbooks should adopt the styles of the tablet, as their resolutions are 800x600 up to 1024x768.
In general, there is no reason to make a different set of styles for anything other than mobile phone and tablet.
Here you can fund all resolutions and their screen sizes:
http://www.codeply.com/responsive-design-cheatsheet.html
For the question you asked:
13' Macbook Air 1440 px x 900px 13 inches
For more testings and research, You can also check this website that tests all required screen resolutions as well provide option to enter custom screen sizes:
http://www.infobyip.com/testwebsiteresolution.php
PS: None of the websites I mentioned above are connected to me, I am just a regular user and a web developer.