响应式网页-媒体查询基本使用

媒体查询基本使用1

/*如果当前的网页是显示在电脑or平板or手机上的, 并且当前浏览器的宽度是大于等于1200px的, 那么就执行后面大括号中的代码*/

        @media screen and (min-width: 1200px){

            div{

                width: 500px;

                height: 500px;

                background: red;

            }

        }

        /*如果当前的网页是显示在电脑or平板or手机上的, 并且当前浏览器的宽度是小于等于1199px的, 那么就执行后面大括号中的代码*/

        @media screen and (max-width: 1199px){

            div{

                width: 300px;

                height: 300px;

                background: green;

            }

        }

        /*如果当前的网页是显示在电脑or平板or手机上的, 并且当前浏览器的宽度是小于等于768px的, 那么就执行后面大括号中的代码*/

        @media screen and (max-width: 768px){

            div{

                width: 100px;

                height: 100px;

                background: blue;

            }

        }

---

媒体查询基本使用2