美文网首页
rem - 自适应布局 一

rem - 自适应布局 一

作者: 银角大王__ | 来源:发表于2018-01-23 17:38 被阅读0次

一 、确定设计图尺寸 (750 640 等)

下图以750为例 


<!DOCTYPE html>

<html lang="en">

<head>

     <meta charset="UTF-8">

    <title>rem - 自适应布局</title>

     <meta http-equiv=Content-Type content="text/javascript;charset="utf-8">

    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

    <script> 

    document.getElementsByTagName('html')[0].style.fontSize = (document.doucmentElement.clientWidth / 750) *100 + "px";

    </script>

    <style>

      *{margin:0;pading:0;}.

      .box{width:0.4rem;height:0.4rem;background:black;}

    </style>

</head>

<body>

  <div class="box"></div>

</body>

</html>

盒子box   在750px的设计图中 宽高 为40px * 40px    ;    在

document.getElementsByTagName('html')[0].style.fontSize= ((window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth) / 750) * 100 + "px";

相关文章

网友评论

      本文标题:rem - 自适应布局 一

      本文链接:https://www.haomeiwen.com/subject/whteaxtx.html