zoukankan      html  css  js  c++  java
  • 07. 如何实现移动端rem适配

    如何实现移动端rem适配
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />//需要这句适配的话
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                 7.5rem;
                height: 7.5rem;
                background: red;
            }
    
        </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    <script type="text/javascript">
        //获取屏幕宽度
        var width = document.documentElement.clientWidth;
    
        //获取html
        var htmlNode = document.querySelector('html');
    
        //设置html字体大小
        htmlNode.style.fontSize = width/7.5 + 'px';
    
    </script>
    </html>
    

      

    10.背景图片距离
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
    
            #box{
                 100px;
                height: 200px;
                background: pink;
                padding: 100px;
                border: 80px solid blue;
                background-image: url("img/1.png");
                background-repeat: no-repeat;
                background-origin: content-box;
                background-position: -50px 0;
            }
    
            /*答案:130px*/
        </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>
    

      

  • 相关阅读:
    UIView与CALayer的区别,很详细
    IOS图标尺寸一览
    iOS开发之WebView
    iOS开发之版本控制(SVN)
    IOS 多个ImageView图片层叠透明区域点击事件穿透
    UIButton
    UISwitch
    cocoapods_第二篇
    UIView
    IOS开发中 RunLoop,RunTime
  • 原文地址:https://www.cnblogs.com/Lolita-web/p/10456768.html
Copyright © 2011-2022 走看看