[CSS] 장치에 맞게 화면을 바꿔주는 스타일 태그

<style>

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

            html {

                background: red;

                color: white; font-weight: bold;

            }

        }

       

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

            html {

                background: green;

                color: white; font-weight: bold;

            }

        }

       

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

            html {

                background: blue;

                color: white; font-weight: bold;

            }

        }

</style>

모바일의 경우는 가로, 세로도 설정해주어야 할 필요가 있껬다.

<style>

@media screen and (orientation: portrait) {

html {

background: red;

color: white; font-weight: bold;

}

}

 

@media screen and (orientation: landscape) {

html {

background: green;

color: white; font-weight: bold;

}

}

</style>