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) { ... }
Related
I have file .psd with sizes 1920X1080.
I need to make responsive website that will look good for small and big screens.
I have made from this psd html with pixel perfect technic.
I just don't understand how to make from it design for smaller screens.
Please advise.
Using CCS3 media queries! Example for Desktop first:
// Your code for Desktop devices
#media only screen and (max-width: 768px) {
// Here your code for mobile
}
or for Mobile First
// Your code for Mobile devices
#media only screen and (min-width: 768px) {
// Here your code for tablet
}
#media only screen and (min-width: 992px) {
// Here your code for Small Desktop
}
Different rules:
#media screen and (max-width: 992px) and (max-height: 700px) {
// Code
}
or:
#media screen and (max-width: 992px) and (min-height: 400px) {
// Code
}
These are only some example. You must study media queries.
This is my bootstrap website: http://www.feather.com.lk/index.php
My main issue is in iPad portrait view. The elements are not resizing as intended. However, further investigation into the issue showed that I only have this issue when the browser size is scaled down to 768px and 769px. I'm not sure how to solve this issue.
The media queries I used:
#media screen and (min-width: 0px) and (max-width:769px)
#media screen and (min-width: 770px) and (max-width: 992px)
#media screen and (min-width: 993px) and (max-width: 1199px)
#media screen and (min-width: 1200px)
It seems like there is a mismatch between your media queries and the ones provided by Bootstrap.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
(Bootstrap Media Queries)
As you can see here, the smallest Bootstrap media query takes a maximum width of 767px (notice that the next one starts from 768px). However, the smallest media query that you have used takes the width of up to 769px. That must be the reason why there are two pixels, where the website doesn't look as intended.
Try changing your media queries to be the same as the ones in Bootstrap.
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
}
I have made a simple website which is responsive (more or less). I have used media query #media only screen and (max-width: 699.99px). Now I know that this will activate the css inside it when resolution is less than 699.99px. So it is fine with computer but it doesn't work in mobiles and I know why. But I don't really understand how to solve this. I want this query to work on computer screen (resizing) as well as mobile devices and tablets.
You can use em or rem instead of px. This makes the styling depend on how much content fits on the screen assuming that you also use em/rem to set the sizes of your elements.
could be an issue with difference between real screen width and actual size
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
or you can use media-device-width
#media only screen and (max-device-width: 700px) {
/* Style goes here */
}
but I suggest you to start with mobile-first approach that will definitely solve the issue. basically first you do css for mobile and then you override css for desktop with media queries like
#media only screen and (min-width: 700px){
/* Style goes here */
}
btw does your device support 699.99px? try using 700 instead
First of all if you want make your website responsive it's better to use responsive framework like Bootstrap or foundation.
but if you prefer to do it without framework. try this
you can make 4 media query steps
// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 544px and up)
#media (min-width: 544px) { ... }
// 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) { ... }
and extra guide
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I hope this can help
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.