Need help with CSS breakpoints

Hello,
I want to know about the css breakpoints i searched on internet and get too many confusing results.
What my requirements are to place only 3 breakpoints which are as follow

to get the screen width of desktops and laptops
then to get screen width of tabs and ipads: portrait and landscape
then to get the screen width of smartphones: potrait and landscape

Please update me with the smallest and finest working example which will be compatible with all screen sizes.

Thanks

 

If you search Google you probably saw this page:

http://responsivedesign.is/develop/...t/media-queries-for-common-device-breakpoints

If that list does not give you what you need then you will need to post very specific requirements about what you want, because your question is pretty vague. Setting a number of queries you will use without first determining what you will actually support is pretty much backward. If you are just going to set an arbitrary number, you will miss all kinds of devices.

 

Actually, @COBOLdinosaur that article is rubbish, because it is "thinking" in terms of pixel widths and specific devices -- a half assed idiotic way to set break points ESPECIALLY if like a good little doobie you've built an elastic layout.

@hallianonline -- which is what's biting you in the backside, you are thinking specific widths instead of the needs of your content. There's a reason I flip design around and build "lowest common denominator" FIRST -- and that lowest common denominator is NOT media query capable mobile, it's non-media query capable desktop machines. You build to that using semi-fluid and elastic layout, then narrow the browser window until you reach the point where it breaks and needs to be re-arrange. That's your media query breakpoint, then you just lather, rinse, repeat until you get down to the narrowest you think you need. (which sadly is usually 192px at small fonts/96dpi/100%/whateverthe****theyarecallingitthisyear)

If you are thinking specific pixel widths and specific devices, YOU'RE DOING IT ALL WRONG!

But again, there's a reason your starting point in design is also the starting point in coding -- semantic markup of your content or a reasonable facsimile of future content. You then bend that markup to your will with CSS and add breakpoints where the CONTENT needs it. Do it that way, and you're set to go with all current AND future devices!

 

I'd recommend you look into online help code which is a great (and it, it's a must) debugger for JavaScript (HTML, CSS, etc. as well). You can set breakpoints and look into the code live. It'll do the job.

 

I think you may refer to Media queries which actually do the breakpoints.
Example are in bootstrap (recommended). But it's up to everyone to change it if you wish to.

/* 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) { ... }

Code (markup):

Source: getbootstrap dot com / css

So the breakpoints there are:
- less than 768px
- tablets, 768px and up
- desktops, 992px and up
- large desktops, 1200px and up
*If you notice, bootstrap is practicing mobile first.

I hope this helps.

Thanks and God bless always!

 

Which is why a hefty chunk of why bootcrap is ignorant halfwit bull alongside it's stupidity of using presentational classes like some sort of OOCSS asshat.

Though as I said, targeting by pixels for breakpoints is also ignorant halfwit bull and the antithesis of accessible design. Design for the content, NOT the device!

 

You will need to have Media properties in your css to make it responsive.
Either you can use bootstrap for this. Bootstrap is developed by twitter organization.
Or you can use media properties directly see http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

 

I learned responsive Technic from this link.
There every thing is very clearly explain. i am not sure if there is mentioned this.

User this meta tag in header:

<meta name="viewport" content="width=device-width, initial-scale=1">

HTML:

Below are very detailed CSS media queries:

/* 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 */
}

/* 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 (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Code (CSS):

if still need help or other detailed. than go to link below:
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

 

Yes, we have to design for the content.
But targeting breakpoints by pixel is actually a practical way and so efficient.
1. I personally used pixels when doing designs on PSD.
2. Most/All of the devices or screen resolutions are in pixels too.
(e.g. iPhone 5 = 320 x 568, iPhone 6 Plus = 414 x 736)
So using pixels for me is a go when doing breakpoints (responsiveness).

Thanks and God bless always!

 

The ONLY time I would ever allow it is for targeting a group of images that need re-arranging. If the content is a mix of images and text or just text, OH HELL NO!

No offense, that means you are dicking around drawing goofy pictures and NOT actually doing web design, since your paint program of choice should NOT come into the mix until AFTER you have working layoutS! ... and that's the truth no matter how many re-re halfwit and scam artist PSD jockeys claim otherwise.

... and there is ALWAYS a new flavor of the month screen size, so targeting by screen size or to specific devices is stupid -- PARTICULARLY if like a good little doobie you are using ACCESSIBLE font sizes (%/EM) and not pissing all over your pages with the dumbass halfwit px measurement for fonts. Your fonts are in EM, your breakpoints need to be in EM since there is no fixed relationship between EM and PX. (and do not believe the ignorant 62.5% bull!

To me that probably means you aren't designing properly from an accessibility and usability standpoint -- there ARE exceptions, but it should be the last resort SPECIFICALLY when dealing with images, not the first go-to.

See this rewrite I just did for someone here:
http://www.cutcodedown.com/for_others/OliverSB/

Which uses both px and em for breakpoints -- the ONLY reason I went to PX being the content (images) were in PX and I wanted to swap how many were shown per row and their alignment. Even so I didn't ONCE think about a specific resolution for any device, I based the change based on the needs of the CONTENT. If you are thinking specific devices you'll NEVER be done with it as there are hundreds of specific resolutions and there always seems to be a new flavor of the week.