zoukankan      html  css  js  c++  java
  • 移动端适配 rem

    <!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>移动端适配方案REM</title>
        <style>
            #remDiv{
                 8rem;
                height: 8rem;
                background-color: pink
            }
    
        </style>
    </head>
    <body>
    <div style="font-size: .75rem">
        解决网页在不同屏幕上展现出的不同布局,导致页面错乱,利用获取视觉窗口的大小设置根元素的字体大小进行适配
    </div>
    <div id="remDiv"></div>
    <script>
        ;(function () {
            //动态获取当前的页面的宽度
            var clientWidth = document.documentElement.clientWidth;
            //创建页面的style标签
            var styleNode = document.createElement('style');
            //向标签内添加样式,并将页面分份(rem就不会在使用小数点) 1rem = 16px  1px = 0.0625rm
            styleNode.innerHTML = 'html{font-size: '+clientWidth/16+'px;}';
            //将标签加入到文档中,从而设置页面根元素的字体大小
            document.head.appendChild(styleNode);
    
            //也可以使用一下语句设置
            // document.querySelector('html').style.fontSize = clientWidth+'px';
        })();
    </script>
    </body>
    </html>
    
  • 相关阅读:
    每日博客
    每日博客
    软件设计命令模式
    软件设计中介者模式
    软件设计模式
    软件设计迭代器模式
    1.7学习进度
    软件设计解释器模式
    软件设计代理模式
    软件设计备忘录模式
  • 原文地址:https://www.cnblogs.com/ikai/p/13113841.html
Copyright © 2011-2022 走看看