Breaking News: Grepper is joining You.com. Read the official announcement!

orientation css max and min width media query

Grumpy Gentoo answered on June 3, 2020 Popularity 10/10 Helpfulness 6/10

answer orientation css max and min width media query

orientation css max and min width media query

Comment

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

Popularity 10/10 Helpfulness 6/10 Language css

Source: stackoverflow.com

Tags: css max media min orientation width

Link to this answer
Share Copy Link

Contributed on Jun 03 2020

Grumpy Gentoo

0 Answers Avg Quality 2/10

orientation css max and min width media query

Contents

More Related Answers

orientation css max and min width media query

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.