CODEWITHSUNDEEP
cssmobilesassmedia-queries
Rebekah
Rebekah

Reputation: 35

Easiest way to create media queries for multiple devices

I am doing updates to my personal website and giving it a completely new layout. I have been working with SASS and converting it to CSS. I want my site to display on any device that the user might be using (i.e laptop, iPad, mobile phone). Currently, I have been writing my SASS/CSS using media queries to target each different device. As there are so many different to deceives, I was wondering if there is an easier way to write style for each device without having to target them individually? 

@media screen and (width: 375px) and (orientation: portrait) {
  button,
#submit,
a.button {
    font-size: 18px;
    width: 200px;
    height: 50px;
  }
}
@media screen and (max-width: 414px) and (orientation: portrait) {
  button,
#submit,
a.button {
    font-size: 18px;
    width: 200px;
    height: 50px;
  }
}

Upvotes: 1

Views: 2021

Answers (3)

Joseph Christopher Pimentel
Joseph Christopher Pimentel

Reputation: 112

Here is my media queries that support major multiple devices.

Supported Devices: Moto G4, Galaxy S5, Pixel 2, Pixel 2 XL, iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 Plus, iPhone X, iPad, iPad Pro, Surface Duo, Galaxy Duo

`@media only screen and (max-width: 280px){

}
@media only screen and (min-width: 281px) and (max-width: 320px){
    
}

@media only screen and (min-width: 321px) and (max-width: 360px){

}

 @media only screen and (min-width: 361px) and  (max-width: 500px){
 
}

 @media only screen and (min-width: 501px) and  (max-width: 800px){
 
 
}
@media only screen and (min-width: 801px) {
 
}`

Upvotes: 0

Amad
Amad

Reputation: 45

A good approach to writing CSS is to use the mobile first principle. It means you start off from the smallest screen and work your way up. This means that your cascade (the C part of CSS) works to it's fullest potential. After you have small, medium and large looking good, start to work on the "weirder" sizes.

For example, mobile landscape size: 

@media only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation: landscape) { 

  code goes here 

}

This should make everything more manageable.

Upvotes: 0

Awais
Awais

Reputation: 4912

These media quires might help you

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

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

Upvotes: 3

Related Questions