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的选择器

这节内容是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面咱们经过实际的应用来具体了解他们的使用和区别，首先列出他具备的选择方法：javascript

1. :first-child选择某个元素的第一个子元素；
2. :last-child选择某个元素的最后一个子元素；
3. :first-of-type选择一个上级元素下的第一个同类子元素；
4. :last-of-type选择一个上级元素的最后一个同类子元素；
5. :nth-child()选择某个元素的一个或多个特定的子元素；
6. :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
7. :nth-of-type()选择指定的元素；
8. :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
9. :only-child选择的元素是它的父元素的惟一一个了元素；
10. :only-of-type选择一个元素是它的上级元素的惟一一个相同类型的子元素；
11. :empty选择的元素里面没有任何内容。