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

    1. 现在前端大多数是用rem 布局,获取窗口的宽除以 “一个数 ”  16,15,20,50,7.5,10.8,随便你写那个

    每当在ps 里面量一个 div 的高,你就得心里或者在计算器算一遍,比如div 高65,转换成rem 是多少呢,

    比如在  iPhone5 屏幕宽320 , 320➗16=20 所以 1rem就是20px,

    比如一个div 高65px

    65/20=3.25rem ,算起来费劲

    2.解决方法 less

      2.1下载koala

      如果是750 的设计图,750/15=50,在750的窗口下,1rem=50px

     在less 加上一句话

     @r:50rem;

     接下来 设计图量多高就写多高,

      比如div高  88px

      div{

        height:88/@r; //然后你看看css 文件,less 帮你算出来了,

      }

     

     

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8" />

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <title></title>

    <style>

    *{padding: 0; margin: 0;}

    .box{height: 200px; width: 16rem; background: red;}

    </style>

    <script>

    (function(){

    var html= document.documentElement;

    var hWidth=html.getBoundingClientRect().width;

    console.log(hWidth);

    html.style.fontSize=hWidth/16 + "px";

    })()

    </script>

    </head>

    <body>

    <div class="box"></div>

    </body>

    </html>

     

     

     

     

  • 相关阅读:
    sql TRUNCATE 和 delete 的区别
    visual studio 2005 service pack 1
    gac 详细的步骤
    简单判断用户重复登录,记录一下
    [转]在SQL Server中使用CLR调用.NET方法
    xml 解析之 JDOM解析
    Java反射机制——反射 API(Day_04)
    结合JVM 浅谈Java 类加载器(Day_03)
    jsoup select 选择器(Day_02)
    SQLite在Android中的使用
  • 原文地址:https://www.cnblogs.com/xiepei/p/9919841.html
Copyright © 2011-2022 走看看