Search code examples
javascripthtmlcssmobile-website

Different stylesheet for different device

I have a question: how to automatically change website look based on device type? I know there is something like

@media screen and (max-width:720px){/*code for mobile here*/}
@media screen and (min-width:1280px) {/*code for PC here*/}

but I think it can cause problems on big resolution mobile devices and low resolution desktop monitors. So I wonder is there any way of changing css file/selecting exact part of css code based on device type, like smartphone, tablet or PC?

Anything that works will help. If something is not clear, I will try to explain it better. If I'm wrong, correct me.

Solution

  • You can use these:

    // Large devices (desktops, less than 1200px)
 @media (max-width: 1199px) { ... }

 // Medium devices (tablets, less than 992px)
 @media (max-width: 991px) { ... }

 // Small devices (landscape phones, less than 768px)
 @media (max-width: 767px) { ... }

 // Extra small devices (portrait phones, less than 576px)
 @media (max-width: 575px) { ... }