zoukankan      html  css  js  c++  java
  • 动态计算rem值

    拷贝直接用即可根据UI设计稿750直接除以375  640直接除以320即可 适合不是很多元素页面;
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta 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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
    html{
    font-size: 100px;
    }

    *{
    padding: 0;
    margin:0;
    }
    .header{
    text-align: center;
    height: 0.5rem;
    100%;
    background-color: #00b793;
    font-size: 0.18rem;
    line-height:0.5rem;
    }
    </style>
    </head>
    <body>
    <div class="header">
    <span>杭州有数金融信息服务有限公司·杭州分公司</span>
    </div>
    <div class="content"></div>
    <div class="footer"></div>
    </body>
    <script>
    // document.documentElement.style.fontSize = document.documentElement.clientWidth*(window.devicePixelRatio||1) / 7.5 + 'px';
    //orientationchange方向改变事件
    (function (doc, win) {
    var docEl = doc.documentElement,//根元素html
    //判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    //把document的fontSize大小设置成跟窗口成一定比例的大小,从而实现响应式效果。
    docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
    };
    //alert(docEl)
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数:第一个是事件名称比如点击事件onclick,第二个是要执行的函数,第三个是布尔值
    doc.addEventListener('DOMContentLoaded', recalc, false)//绑定浏览器缩放与加载时间
    })(document, window);
    //alert(document.documentElement.clientWidth/320)
    </script>
    </html>
  • 相关阅读:
    permission 文档 翻译 运行时权限
    TabLayout ViewPager Fragment 简介 案例 MD
    Log 日志工具类 保存到文件 MD
    OkHttp 官方wiki 翻译 MD
    Okhttp 简介 示例 MD
    OkHttp 官方Wiki之【使用案例】
    DialogPlus
    倒计时 总结 Timer Handler CountDownTimer RxJava MD
    RecyclerView 判断滑到底部 顶部 预加载 更多 分页 MD
    CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
  • 原文地址:https://www.cnblogs.com/zou1234/p/7683330.html
Copyright © 2011-2022 走看看