em实例

最新推荐文章于 2024-07-20 23:54:17 发布

weixin_30487701

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量69

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xutongbao/p/9924928.html

版权

<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <title>em实例</title>  
    <style type="text/css">  
        div {  
            margin: 0 0 10px;  
        }  
        .div0 {  
            width: 100px;  
            height: 100px;  
            font-size: 20px;  
            border: 1px solid green;  
        }  
        .div1 {  
            width: 5em;  
            height: 5em;  
            font-size: 0.2em;  
            border: 1px solid green;  
        }  
        .div1s {    
            width: 1rem;    
            height: 1rem;    
            font-size: 0.2rem;    
            border: 1px solid green;    
        }          
        .div2 {  
            width: 5em;  
            height: 5em;  
            font-size: 0.4em;  
            border: 1px solid green;  
        }   
        .div2 span {
            font-size: 0.5em;  
        }
    </style>  
    <script type="text/javascript">  
        //document.documentElement.style.fontSize = document.documentElement.clientWidth / 19.20 + 'px';  

        (function (doc, win) {  
            var docEl = doc.documentElement;  
            var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; 

            var recalc = function () {  
                var clientWidth = docEl.clientWidth;  
                if (!clientWidth) {
                    return;
                }  
                docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';  
            };  

            if (!doc.addEventListener) {
                return; 
            }
            win.addEventListener(resizeEvt, recalc, false);  
            doc.addEventListener('DOMContentLoaded', recalc, false);  
        })(document, window);  
    </script>  
</head>    
<body>  
    1em
    <div class="div0">20px</div>  
    <div class="div1">0.2em</div>    
    <div class="div1s">0.2rem</div>       
    <div class="div2">0.4em<span>0.5em</span></div>  
</body>    
</html>

基于1920的设计图，我的电脑也是1920的

浏览器全屏时：

浏览器半屏时：

转载于:https://www.cnblogs.com/xutongbao/p/9924928.html

weixin_30487701

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
em实例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>em实例</title> <style type="text/css"> ...
复制链接

扫一扫