Using media queries is a great way to optimize your sites for all different mobile viewports. When using media queries to make your site responsive and mobile friendly, it’s important to keep certain breaking points in mind. Use the media queries in this snippet to make sure that your CSS is optimized specifically to accommodate the most popular devices/viewport sizes.
- /* Desktops and laptops */
- @media only screen and (min-width : 1224px) {
- }
- /* Large screens */
- @media only screen and (min-width : 1824px) {
- }
- /* Tablets (landscape) */
- @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
- }
- /* Tablets (portrait) */
- @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
- }
- /* Smartphones (landscape) */
- @media only screen and (min-width : 321px) {
- }
- /* Smartphones (portrait) */
- @media only screen and (max-width : 320px) {
- }