rem

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>root</title>
    <style type="text/css">
    @media (max-width : 479px) { 
        html {
            font-size: 12px;
        }
    }

    @media (min-width : 480px) and (max-width : 779px) { 
        html {
            font-size: 14px;
        }
    }

    @media (min-width : 780px) and (max-width : 979px) { 
        html {
            font-size: 16px;
        }
    }

    @media (min-width : 980px) and (max-width : 1199px) { 
        html {
            font-size: 18px;
        }
    }

    @media (min-width : 1200px) { 
        html {
            font-size: 20px;
        }
    }
    </style>
</head>
<body>
    
    <h1 style="font-size: 1rem;padding: 1rem;">Hello World!</h1>

</body>
</html>

 

posted @ 2016-08-16 21:24  jiangxiaobo  阅读(161)  评论(0编辑  收藏  举报