css3 之rem 的使用

時間 2019-11-19

標籤 css3 css rem 使用欄目 CSS 简体版

原文原文鏈接

話很少說 直接上代碼！！！


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <style type="text/css">
        html{
            /*-webkit-touch-callout: none;*/
            /*-webkit-user-select:none;*/
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            font-size: 100px;
        }
        body{
            font-size: 0.16rem;
            padding: 0;
            margin: 0;
        }
        ul{
            width: 100%;
            margin: 0;
            -webkit-margin-before: 0em;
            -webkit-margin-after: 0;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
            -webkit-padding-start: 0px
        }
        li{
            height: 0.5rem;
            line-height: 0.5rem;
            list-style-type: none;
        }
        .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
        .btn-blue-on{background-color: #357AE8;}

        input::-webkit-input-placeholder {
            color: red;
        }
        /*input:focus::-webkit-input-placeholder{color: yellow;}*/
    </style>
</head>
<body>
<ul>
    <li style="background: #ff4e4e;text-align: center; color: #ffffff">這是一個段落檢測的是字體大小</li>
    <li style="font-size: 0.14rem">這是一個段落檢測的是字體大小</li>
    <li style="font-size: 0.12rem">這是一個段落檢測的是字體大小</li>
    <li style="font-size: 0.1rem">這是一個段落檢測的是字體大小</li>
    <li style="font-size: 0.08rem">這是一個段落檢測的是字體大小</li>
    <li style="font-size: 0.06rem">這是一個段落檢測的是字體大小</li>
    <li style="font-size: 0.04rem">這是一個段落檢測的是字體大小</li>
    <li style="font-size: 0.02rem">這是一個段落檢測的是字體大小</li>
    <li style="font-size: 0.01rem">這是一個段落檢測的是字體大小</li>

</ul>
<!--<div class="btn-blue">按鈕</div>-->
<script src="js/jquery-1.5.1.js"></script>
<script type="text/javascript">

//這段代碼呢是用於兼容ios android 的下的按鈕點擊事件（移動端的）
//    var btnBlue = document.querySelector(".btn-blue");
////    var btnBlue = document.getElementsByClassName(".btn-blue")[0];
手指接觸的時候添加一個類
//    btnBlue.ontouchstart = function(){
//        this.className = "btn-blue btn-blue-on"
//    };
手指離開的時候刪除這個類 
//    btnBlue.ontouchend = function(){
//        this.className = "btn-blue"
//    };
//   從而實現像css3的active的效果
    (function(doc,win){
        var docEl=doc.documentElement,
                resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize',
                recalc=function(){
                    var clientWidth=docEl.clientWidth;
                    if(!clientWidth)return;
                    docEl.style.fontSize=100*(clientWidth/320)+'px';
                };
        if(!doc.addEventListener)return;

        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document,window);

</script>

</body>
</html>


新的css3的選擇器