zoukankan      html  css  js  c++  java
  • rem布局

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>rem布局</title>
     6     <style>
     7         #div1{width:10rem;height:10rem;background:#f45}
     8     </style>
     9 </head>
    10 <body>
    11 <div id="div1"></div>
    12 <script>
    13     (function(doc, win){
    14         var docEle = doc.documentElement;
    15         var evt = "onorichange" ? "onorichange" : "resize";
    16         var fn = function() {
    17             var width = docEle.clientWidth;
    18             width && (docEle.style.fontSize = 20 * (width / 320) + "px");
    19 
    20       }
    21         fn();
    22     })(document, window)
    23 
    24 
    25 //    width /320 = docEle.style.fontSize/20 ;
    26     
    27 //    目标浏览器的宽度和320的比例 等于 目标浏览器字体大小 与 320宽度浏览器的字体大小的比值
    28 //    
    29 //    就是定的稿子的宽度为320px宽度,设置其html根字体为font-size:20px;
    30 //    
    31 //    设置动态比例保证 320/20 = 16 rem 等于屏幕宽度,保证其等比缩放;
    32     
    33 
    34 </script>
    35 </body>
    36 </html>
    坚持下去就能成功
  • 相关阅读:
    JSP内置对象和属性
    AWT和Swing
    Servlet的生命周期
    Servlet 与 CGI 的比较
    spring PROPAGATION
    JVM内存
    CISC, RISC 探究
    3.5.10 判断数字的奇偶
    java 中利用异或实现两个变量互换
    Java三大主流框架概述
  • 原文地址:https://www.cnblogs.com/suoking/p/5446270.html
Copyright © 2011-2022 走看看