建站教学网,让你建站更便捷和轻松!
您当前的位置:首页 > 网页制作 > CSS教程

css里面字体大小和图片大小rem让手机站自适应如此简单

来源:建站教学网  时间:2019-01-09 17:12:26

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none; color:#666666;}
a:hover{text-decoration:none; color:#666666;}
a:after{text-decoration:none; color:#666666;}
body{width:100%; color:#666666;}
.loginfo{height:1.4em;border-bottom:2px solid #e0e0e0;clear:both;}
.log_content{padding-top:.3em;}
.loginfo .loginfoLeft{width:1.7em;float:left;height:100%;}
.loginfo .loginfoLeft img{width:.5em;height:.8em;display:inline-block;margin-left:.7em;}
.loginfo .loginfoRight{margin-left:1.7em;height:100%;}
.log_tit{font-size:.36em;color:#666666;}
.log_detail{font-size:.28em;color:#808080;padding-top:.2rem;}
</style>
<script src="js/jquery.min.js"></script>
<script>
!function(n) {
    var e = n.document,
    t = e.documentElement,
    i = 720,
    d = i / 100,
    o = "orientationchange" in n ? "orientationchange": "resize",
    a = function() {
        var n = t.clientWidth || 320;
        n > 720 && (n = 720),
        t.style.fontSize = n / d + "px"
    };
    e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
} (window);
</script>
</head>


<body>
<div class="loginfo">
   <div class="log_content">
        <div class="loginfoLeft"><img src="images/Mobile.png" /></div>
        <div class="loginfoRight">
          <div class="log_tit">手机认证</div>
          <div class="log_detail">拥有此图标的用户,已经通过手机认证。</div>
        </div>
   </div>
</div>
<div class="loginfo">
   <div class="log_content">
        <div class="loginfoLeft"><img src="images/Strength.png"/></div>
        <div class="loginfoRight">
          <div class="log_tit">实名认证</div>
          <div class="log_detail">拥有此图标的用户,已经通过实名认证。</div>
        </div>
   </div>
</div>
<div class="loginfo">
   <div class="log_content">
        <div class="loginfoLeft"><img src="images/Capital.png"/></div>
        <div class="loginfoRight">
          <div class="log_tit">资金认证</div>
          <div class="log_detail">拥有此图标的用户,已经通过实名认证。</div>
        </div>
   </div>
</div>
<div class="loginfo">
   <div class="log_content">
        <div class="loginfoLeft"><img src="images/Firm.png"/></div>
        <div class="loginfoRight">
          <div class="log_tit">实盘认证</div>
          <div class="log_detail">拥有此图标的用户,已经通过实盘认证。</div>
        </div>
   </div>
</div>
</body>
</html>
 

责任编辑:风中的自由

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
CopyRight 2008-2019, JZREAD.COM, Inc. All Rights Reserved
皖ICP备09015033号