媒体查询的引入方式

jijsn

于 2022-08-16 19:11:41 发布

阅读量268

点赞数

文章标签： servlet html java

本文链接：https://blog.csdn.net/jijsn/article/details/126372552

版权

媒体查询的引入方式

1.内部方式引入

 <style>

        body {
            background-color: red;
        }

        /* 横屏 宽大于高 */
        @media screen and (orientation: landscape) {
            body {
                background-color: yellow;
            }
        }

        /* 竖屏 高大于宽 */
        @media screen and (orientation: portrait) {
            body {
                background-color: pink;
            }
        }
    </style>

2.外链式

 在html的head标签的内部使用link标签引入外部的css文件（后缀名为.css的文件）
    <head>
    <link rel="stylesheet" href="./css/demo.css">
    </head>

    body {
        background-color: pink;
    }

    /* 横屏 宽大于高 */
    @media screen and (orientation: landscape) {
        body {
            background-color: tomato;
        }
    }

    /* 竖屏 高大于宽 */
    @media screen and (orientation: portrait) {
        body {
            background-color: yellowgreen;
        }
    }

    <!-- 只有横屏时有样式 -->
    <link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: landscape)"> 

    <!-- 只有竖屏时有样式 -->
    <link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: portrait)">