Media Query for Samsung Galaxy - css

I have media queries and for all devices, you can see it here, in CSS -
and here without all the elements...
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops */
#media (min-width: 80.0625em) {
......
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px */
#media (min-width: 64.0625em) and (max-width: 80em) {
............
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px */
#media only screen and (min-width: 48em)
and (max-width: 64em)
and (orientation: portrait) {
............................
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1023px
*/
#media (min-width: 48em) and (max-width: 64em) and (orientation: landscape) {
....................
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media only screen and (min-width: 41.75em) and (max-width: 47.9375em) {
..............
}
/* für iPhone 6/7/8 766,4px x 375px */
#media only screen and (max-width: 47.9em)
and (min-width: 23.4375em)
and (orientation: landscape) {
...............................
}
/* kleine smartphone Landscape 640px x 319px kleine als Galaxy S5 */
#media only screen and (max-width: 40em) and (orientation: landscape) {
..................................
}
/* iphone 5 und kleine 528px */
#media only screen and (max-width: 33em) and (orientation: landscape) {
......................
}
/* ich selb gebaut 767px x 481px
#media only screen and (max-width: 30.0625em) and (orientation: portrait) {
...................
}
/* iphone 5 galaxy S5 */
#media only screen and (max-width: 23em) and (orientation: portrait) {
.......................
}
My problem is with Samsung Galaxy off A 50 and Landscape, till A 40, landscape and portrait, working gut, but off A 50, only portrait working.
Can anyone help me and give me an idea how I can remedy this problem?


I found the solution for Media Query for Samsung Galaxy off A 50 landscape .
I add:
#media only screen and (max-width: 55.75em) {
.......................
}
betwixt
#media (min-width: 48em) and (max-width: 64em) and (orientation: landscape) {
....................
}
and
#media only screen and (min-width: 41.75em) and (max-width: 47.9375em) {
..............
}
I was at a shopping centre and locking many Smartphone, and the majority of them can see my website gut.... I think the best solution for this problem is making smaller the difference between Media Queries on max-width.

Related

Hello, Site not being responsive on mobile device but is on desktop. What have I done?

Ive just uploaded my first site for testing and already found that on a mobile device it isnt doing what I wanted? sorry this is my first site and first question so if you need any more information please ask. The site is nixoncreations.com . The images in desktop should be in a row of 3 , ive added
#media screen and (max-width: 1000px) {
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr ;}
It works on my laptop screen but not my phone, any advice and help would be much appreciated

/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
#media (min-width: 1281px) {
/* CSS */
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
#media (min-width: 1025px) and (max-width: 1280px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media (min-width: 481px) and (max-width: 767px) {
/* CSS */
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
#media (min-width: 320px) and (max-width: 480px) {
/* CSS */
}

Thank you for that I will use that in the future, still didnt work but I found out what it was. I forgot to add this, as I said I'm new and would love advice
<meta name="viewport" content="width=device-width, initial-scale=1.0">

two screen widths: 375px and 1024px

How do I build a website at two screen widths: 375px and 1024px? the website need not respond to widths between the two.
#media only screen and (min-width : 375px) and (max-width : 1024px)
As far as I know this tag media work between 375 and 1024. Perhaps using breakpoint is the right approach. Any suggestion?

It is always best to design your CSS mobile-first, which means that your CSS file looks a little like this:
CSS:
// Basic CSS
div {
height: 200px;
width: 200px;
background-color: yellow;
}
#media screen and (min-width: 375px) {
div {
height: 150px;
}
}
#media screen and (min-width: 1024px) {
div {
height: 100px;
background-color: red;
}
This way you have a div that renders in three different ways on your breakpoints
0 - 374px it's a square of 200x200 pixels with a yellow background
375px - 1023px it's a rectangle of 150x200 pixels with a yellow background
1024px and up it's a rectangle of 100x200 pixels with a red background
This way you don't repeat yourself too much, your code stays clean and you only override what is necessary.

I am giving media queries for all devices with portrait mode also . I am given the media query CSS using breakpoint also. Use this media query for the better use and also the portrait devices include in this answer:
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
#media (min-width: 1281px) {
//CSS
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
#media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
#media (min-width: 320px) and (max-width: 480px) {
//CSS
}

media query device-width and "regular" width not working

In the code example below there are two cubes with styles for desktop and mobile.
on the iphone for example the cube should be green whereas on desktop it should be (and is) red.
On my iPhone in portrait view I get nothing, on landscape, it is red instead of green.
Same on the iPad.
On Google Chrome Developer Tools, when I choose Apple iPhone 5 Portrait, it doesn't show the media query in the Styles, as if it weren't recognising it or something.
What am I doing wrong?
/* for desktop */
#media only screen and (min-width: 400px) and (max-width: 767px) {
#block2 {width:100px;height:100px;background:red;}
}
/* for iPhone */
#media only screen and (min-device-width:320px) and (max-device-width: 767) {
#block2 {width:100px;height:100px;background:green;}
}
/* for desktop */
#media only screen and (min-width: 960px) and (max-width: 1024px) {
#block {width:100px;height:100px;background:red;}
}
/* for iPad */
#media only screen and (min-device-width:768px) and (max-device-width: 1024) {
#block {width:100px;height:100px;background:green;}
}
<div id="block"></div>
<div id="block2"></div>

There is a syntax error:
(max-device-width: 767)
(max-device-width: 1024)
to
(max-device-width: 767px)
(max-device-width: 1024px)

Try something like this.
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
#media only screen and
(min-device-width: 320px) and (max-device-width: 568px) and
(-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
For more details - CSS-Tricks

Widths to use in media queries [closed]

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 6 years ago.
Improve this question
What are the most important media query widths for all devices like desktops, tablets, laptops/Ipads, Iphones and Smartphones?
Are there any standard widths for these devices?

I'm looking everywhere for the best answer for this. Here what I found.
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
#media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets # 600 or # 640 wide. */ }
#media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
#media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
I think this is better considering with mobile first approach. Start from mobile style sheet and then apply media queries relevant for other devices. Thanks for #ryanve. Here is the link.

I find these are good breakpoints to start from but always test and tweak as you go. I'd also suggest using ems instead of px for dimensions for varied device dimensions and resolutions (reasons described here (http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/))
So the above queries would look like this:
#media (min-width:20em) { /* smartphones, iPhone, portrait 480x320 phones */ }
#media (min-width:30.063em) { /* portrait e-readers (Nook/Kindle), smaller tablets # 600 or # 640 wide. */ }
#media (min-width:40.063em) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
#media (min-width:60.063em) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:64.063em) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:80.063em) { /* hi-res laptops and desktops */ }
There is also a nifty pixel to em calculator online here (http://pxtoem.com/)
For those of you not as familiar, including myself.

Try this including retina
/* 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 */
}

Try this Media Query it will help you
#media only screen and (min-width:1280px) {}
#media (min-width:1024px) and (max-width:1279px) {}
#media (min-width:768px) and (max-width:1023px) {}
#media (min-width:480px) and (max-width:767px) {}
#media screen and (max-width:479px) {}
#media only screen and (max-width:320px) {}
#media only screen and (max-width:767px) {}

perfect media query
#media (max-width:400px) {}
#media (min-width:401px) and (max-width:599px) {}
#media (min-width:600px) and (max-width:767px) {}
#media (min-width:768px) and (max-width:950px) {}
#media (min-width:951px) and (max-width:1050px) {}
#media (min-width:1051px) {}

Media Queries: How to target desktop, tablet, and mobile?

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes.
I want to be able to target desktop, tablet and mobile. I know that there will be some discrepancies but it would be nice to have a generic system that can be used to target these devices.
Some examples I have found:
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
Or:
# Phone
only screen and (max-width:320px)
# Tablet
only screen and (min-width:321px) and (max-width:768px)
# Desktop
only screen and (min-width:769px)
What should the breakpoints be for each device?

IMO these are the best breakpoints:
#media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
#media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
#media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
#media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
Edit: Refined to work better with 960 grids:
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
#media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets # 600 or # 640 wide. */ }
#media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
#media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em.
In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.
Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

Don't target specific devices or sizes!
The general wisdom is not to target specific devices or sizes, but to reframe the term 'breakpoint':
develop the site for mobile first using percentages or ems, not pixels,
then try it in a larger viewport and note where it begins to fail,
redesign the layout and add a CSS media query just to handle the broken parts,
repeat the process until you reach the next breakpoint.
You can use responsivepx.com to find the 'natural' breakpoints, as in 'breakpoints are dead' by Marc Drummond.
Use natural breakpoints
The 'breakpoints' then become the actual point at which your mobile design begins to 'break' i.e. cease to be usable or visually pleasing. Once you have a good working mobile site, without media queries, you can stop being concerned about specific sizes and simply add media queries that handle successively larger viewports.
If you're not trying to pin design to exact screen size, this approach works by removing the need to target specific devices. The integrity of the design itself at each breakpoint ensures that it will hold up at any size. In other words, if a menu/content section/whatever stops being usable at a certain size, design a breakpoint for that size, not for a specific device size.
See Lyza Gardner's post on behavioral breakpoints, and also Zeldman's post about Ethan Marcotte and how responsive web design evolved from the initial idea.
Use semantic markup
Further, the simpler and more semantic the DOM structure with nav, header, main, section, footer etc. (avoiding abominations like div class="header" with nested inner div tags) the easier it will be to engineer responsiveness, especially avoiding floats by using CSS Grid Layout (Sarah Drasner's grid generator is a great tool for this) and flexbox for arranging and re-ordering according to your RWD design plan.

If you want to target a device then just write min-device-width. For example:
For iPhone
#media only screen and (min-device-width: 480px){}
For tablets
#media only screen and (min-device-width: 768px){}
Here are some good articles:
How to fit your website for the Apple iPad
CSS3 Media Queries

I have used this site to find the resolution and developed CSS per actual numbers.
My numbers vary quite a bit from the above answers, except that the my CSS actually hits the desired devices.
Also, have this debugging piece of code right after your media query
e.g:
#media only screen and (min-width: 769px) and (max-width: 1281px) {
/* for 10 inches tablet screens */
body::before {
content: "tablet to some desktop media query (769 > 1281) fired";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
}
Add this debugging item in every single media query and you will see what query has being applied.

The best breakpoints recommended by Twitter Bootstrap
/* 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) {
}
Source: https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

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 */
}
/* iPhone 5 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6 ----------- */
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6+ ----------- */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S3 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S4 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* Samsung Galaxy S5 ----------- */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Extra small devices (phones, up to 480px)
Small devices (tablets, 768px and up)
Medium devices (big landscape tablets, laptops, and
desktops, 992px and up)
Large devices (large desktops, 1200px and up)
portrait e-readers (Nook/Kindle), smaller tablets - min-width:481px
portrait tablets, portrait iPad, landscape e-readers - min-width:641px
tablet, landscape iPad, lo-res laptops - min-width:961px
HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3
Samsung Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio:
3/2), (min-device-pixel-ratio: 1.5
Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - Older Firefox browsers (prior to Firefox 16) -
Samsung Galaxy S4 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 3
LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2
Asus Nexus 7 device-width: 601px device-height: 906px
-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)
iPad 1 and 2, iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1
iPad 3 and 4 device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 2)
iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1)
iPhone 4 device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 2)
iPhone 5 device-width: 320px device-height: 568px -webkit-device-pixel-ratio: 2)

This is only for those who haven't done 'mobile-first' design to their websites yet and looking for a quick temporary solution.
For Mobile Phones
#media (max-width:480px){}
For Tablets
#media (max-width:960px){}
For Laptops/Desktop
#media (min-width:1025px){}
For Hi-Res Laptops
#media (max-width:1280px){}

Nowadays the most common thing is to see retina-screen devices, in other words: devices with high resolutions and a very high pixel density (but usually smaller than 6 inches physical size). That's why you will need retina display specialized media-queries on your CSS. This is the most complete example I could find:
#media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
#media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
#media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
}
Source: CSS-Tricks Website

It's not a matter of pixels count, it's a matter of actual size (in mm or inches) of characters on the screen, which depends on pixels density.
Hence "min-width:" and "max-width:" are useless.
A full explanation of this issue is here:
what exactly is device pixel ratio?
"#media" queries take into account the pixels count and the device pixel ratio, resulting in a "virtual resolution" which is what you have to actually take into account while designing your page: if your font is 10px fixed-width and the "virtual horizontal resolution" is 300 px, 30 characters will be needed to fill a line.

Since there are many varying screen sizes that always change and most likely will always change the best way to go is to base your break points and media queries on your design.
The easiest way to go about this is to grab your completed desktop design and open it in your web browser. Shrink the screen slowly to make it narrower. Observe to see when the design starts to, "break", or looks horrible and cramped. At this point a break point with a media query would be required.
It's common to create three sets of media queries for desktop, tablet and phone. But if your design looks good on all three, why bother with the complexity of adding three different media queries that are not necessary. Do it on an as-needed basis!

Nice and simple
/* Mobile Devices */
#media (max-width: 480px) {
foo > bar {
}
}
/* Low resolution Tablets and iPads */
#media (min-width: 481px) and (max-width: 767px) {
foo > bar {
}
}
/* Tablets iPads (Portrait) */
#media (min-width: 768px) and (max-width: 1024px){
foo > bar {
}
}
/* Laptops and Desktops */
#media (min-width: 1025px) and (max-width: 1280px){
foo > bar {
}
}
/* Big boi Monitors */
#media (min-width: 1281px) {
foo > bar {
}
}

One extra feature is you can also use media-queries in the media attribute of the <link> tag.
<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">
With this, the browser will download all CSS resources, regardless of the media attribute.
The difference is that if the media-query of the media attribute is evaluated to false then that .css file and his content will not be render-blocking.
Therefore, it is recommended to use the media attribute in the <link> tag since it guarantees a better user experience.
Here you can read a Google article about this issue https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
Some tools that will help you to automate the separation of your css code in different files according to your media-querys
Webpack
https://www.npmjs.com/package/media-query-plugin
https://www.npmjs.com/package/media-query-splitting-plugin
PostCSS
https://www.npmjs.com/package/postcss-extract-media-query

I am using following one to do my job.
/* 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 */
}
/* iPhone 5 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6, 7, 8 ----------- */
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6+, 7+, 8+ ----------- */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone X ----------- */
#media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
#media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* iPhone XS Max, XR ----------- */
#media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
#media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* Samsung Galaxy S3 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S4 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* Samsung Galaxy S5 ----------- */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

If you wanna create more specific media queries here is an example for IPhone which is copied from this link https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ and you can find media queries for more devices at this link )
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}

Extra small devices ~ Phones (< 768px)
Small devices ~ Tablets (>= 768px)
Medium devices ~ Desktops (>= 992px)
Large devices ~ Desktops
(>= 1200px)

Best solution for me, detecting if a device is mobile or not:
#media (pointer:none), (pointer:coarse) {
}

The behavior does not change on desktop. But on tablets and mobiles, I expand the navbar to cover the big logo image. Note: Use the margin (top and bottom) as much as you need for your logo height.
For my case, 60px top and bottom worked perfectly!
#media (max-width:768px) {
.navbar-toggle {
margin: 60px 0;
}
}
Check the navbar here.

$xs : "extra-small";
$s : "small";
$m : "medium";
$l : "large";
$xl : "extra-large";
#mixin respond($breakpoint) {
#if($breakpoint == $xs) {
#media only screen and (min-width: 320px) and (max-width: 479px) { #content; }
}
#if($breakpoint == $s) {
#media only screen and (min-width: 480px) and (max-width: 767px) { #content; }
}
#if($breakpoint == $m) {
#media only screen and (min-width: 768px) and (max-width: 991px) { #content; }
}
#if($breakpoint == $l) {
#media only screen and (min-width: 992px) and (max-width: 1199px) { #content; }
}
#if($breakpoint == $xl) {
#media only screen and (min-width: 1200px) { #content; }
}
}
you can also add one more for for sceen smaller then 320px like Galaxy fold

It's not just about resolution, you also need to find DPR of the device:
whatismyscreenresolution
"Device Pixel Ratio(DPR) is a number given by device manufacturers and it's used for HiDPI(High Dots Per Inch) or Retina(Apple's trademark) displays"
Media query example: (min-resolution: 3.0dppx)

There is a way to simplify all of this:
<500px: 's' Vertical Phones
>500px: 'l' Desktop, TV, Tablets, Phones in Horizontal mode
Note: The reason I picked 500 is because the smallest you can change the width of the desktop window is 500, thus anything bigger is desktop and aything smaller will be vertical mobile.
You can design your website only using these breakpoints since there will always be an overlap between Desktop, TV, Tablets and horizontal phones. If your design looks good on a small desktop (Example: 600px) then it would also look good on the rest of the devices.
1 more breakpoint can be added so that small desktop and tablets have a better design with more space:
<500px: 's' Vertical Phone
500px - 1200px: 'm' Small Desktop, Tablets, Horizontal Phones
>1200px: 'l' Large Desktop, Horizontal Tablets
The media queries:
/*<500px S*/
#media only screen and (max-width: 499px) { }
/*500-1200 M*/
#media only screen and (min-width: 500px) and (max-width: 1199px) { }
/*>1200px L*/
#media only screen and (min-width: 1200px) { }

#media (max-width: 767px) {
.container{width:100%} *{color:green;}-Mobile
}
#media (min-width: 768px) {
.container{width:100%} *{color:pink } -Desktop
}
#media (min-width: 768px) and (orientation:portrait) {
.container{width:100%} *{color:yellow } -Mobile
}
#media (min-width: 1024px) {
.container{width:100%} *{color:pink } -Desktop
}
#media (min-width: 1200px) {
.container{width:1180px} *{color:pink } -Desktop
}

Resources