zoukankan      html  css  js  c++  java
  • 移动前端开发:待处理

    viewport

    http://www.cnblogs.com/2050/p/3877280.html

    web-app-rem

    http://isux.tencent.com/web-app-rem.html

    http://121.40.99.17/global/rem-phone.html

     1 <!DOCTYPE html>
     2 <html lang="zh">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>rem phone test</title>
     7     <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     8     <style>
     9         html {
    10             height: 100%;
    11             width: 100%;
    12             font-family: 'Heiti SC', 'Microsoft YaHei';
    13             font-size: 20px;
    14             overflow: hidden;
    15             outline: 0;
    16             -webkit-text-size-adjust:none;
    17         }
    18         body {
    19             height: 100%;
    20             margin: 0;
    21             overflow: hidden;
    22             -webkit-user-select: none;
    23             position: relative;
    24         }
    25         header,
    26         footer {
    27             width: 100%;
    28             line-height: 1.5rem;
    29             font-size: 1rem;
    30             color: #000;
    31             border: 1px solid #ccc;
    32             text-align: center;
    33             background-color: #ccc;
    34         }
    35         .bd {
    36             margin-top: 1rem;
    37             margin-bottom: .5rem;
    38             margin-right: -.5rem;
    39             font-size: 0;
    40         }
    41         .box {
    42             width: 5rem;
    43             height: 5rem;
    44             display: inline-block;
    45             margin-right:.5rem;
    46             margin-bottom: .5rem;
    47         }
    48         .blue-box {
    49             background-color: #06c;
    50         }
    51         .org-box {
    52             background-color: #1fc195;
    53         }
    54     </style>
    55     
    56 </head>
    57 
    58 <body>
    59 
    60     <header>我是头部</header>
    61 
    62 
    63     <div class="bd">
    64         <div class="box blue-box"></div>
    65         <div class="box org-box"></div>
    66         <div class="box blue-box"></div>
    67         <div class="box org-box"></div>
    68         <div class="box blue-box"></div>
    69         <div class="box org-box"></div>
    70     </div>
    71 
    72 
    73     <footer>我是页脚</footer>
    74     
    75     <script>
    76         (function (doc, win) {
    77           var docEl = doc.documentElement,
    78             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    79             recalc = function () {
    80               var clientWidth = docEl.clientWidth;
    81               if (!clientWidth) return;
    82               docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
    83             };
    84 
    85           if (!doc.addEventListener) return;
    86           win.addEventListener(resizeEvt, recalc, false);
    87           doc.addEventListener('DOMContentLoaded', recalc, false);
    88         })(document, window);
    89     </script>
    90 </body>
    91 
    92 </html>
    View Code
  • 相关阅读:
    一日一技:微信开发-自定义菜单
    Redis五种数据结构
    .NET 5 部署在docker上运行
    一日一技:微信开发-发送模板消息
    Redis快速入门及应用
    面试官扎心一问:防止重复请求提交,有什么方案?
    在Windows上安装Docker
    上班摸鱼神器—VSCode 里也可以看股票 & 基金实时数据
    C# Nuget程序集StackExchange.Redis操作Redis 及 Redis 视频资源 及 相关入门指令 牛逼不,全都有
    Mongodb 更新某一条记录 C#
  • 原文地址:https://www.cnblogs.com/Sisiflying/p/5468342.html
Copyright © 2011-2022 走看看