您的位置：首页 > Web前端 > CSS

css3 之rem 的使用

2016-01-18 13:52 597 查看 
话不多说 直接上代码！！！

<!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结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法：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选择的元素里面没有任何内容。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航