Responsive Design by CSS Media Query

     Here is the list of size for different devices for responsive design website:

        /* Media Query for Mobile Devices */


        @media (max-width: 480px) {
            body {
                background-color: red;
            }
        }

        

        /* Media Query for low resolution  Tablets, Ipads */

        @media (min-width: 481px) and (max-width: 767px) {
            body {
                background-color: yellow;
            }
        }

          
        /* Media Query for Tablets Ipads portrait mode */


        @media (min-width: 768px) and (max-width: 1024px){
            body {
                background-color: blue;
            }
        }
          

        /* Media Query for Laptops and Desktops */


        @media (min-width: 1025px) and (max-width: 1280px){
            body {
                background-color: green;
            }
        }
          

        /* Media Query for Large screens */


        @media (min-width: 1281px) {
            body {
                background-color: white;
            }
        }

min-width:
start from samll width to big width

max-width:
start from big to small width

Post a Comment

0 Comments