CSS----媒体查询设置根节点字体大小

 

<html>

<head>
    <title>CSS----媒体查询设置根节点字体大小</title>
    <meta name="keyword" content="CSS----媒体查询设置根节点字体大小">
    <meta name='discription' content="CSS----媒体查询设置根节点字体大小">
    <style>
    /* 字体大小 */

    @media only screen and (min-width:320px) and (orientation:portrait) {
        html {
            font-size: 12px;
        }
    }

    @media only screen and (min-width:360px) and (orientation:portrait) {
        html {
            font-size: 15px;
        }
    }

    @media only screen and (min-width:400px) and (orientation:portrait) {
        html {
            font-size: 18px;
        }
    }

    @media only screen and (min-width:600px) and (orientation:portrait) {
        html {
            font-size: 24px;
        }
    }

    @media only screen and (max-width:768px) and (orientation:portrait) {}

    @media only screen and (min-width:480px) and (orientation:landscape) {
        html {
            font-size: 12px;
        }
    }

    @media only screen and (min-width:580px) and (orientation:landscape) {
        html {
            font-size: 13px;
        }
    }

    @media only screen and (min-width:730px) and (orientation:landscape) {
        html {
            font-size: 16px;
        }
    }

    @media only screen and (min-width:900px) and (orientation:landscape) {
        html {
            font-size: 21px;
        }
    }

    @media only screen and (min-width:992px) {
        html {
            font-size: 24px;
        }
    }
    </style>
</head>

<body>
</body>

</html>

　　

posted @ 2018-03-29 16:20  SunLike阿理旺旺  阅读(536)  评论(0)  编辑  收藏  举报