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>

     

     

     

     

  • 相关阅读:
    Java中hashCode() 和 equals()
    【转】Java操作Excel竟然这么简单!
    SpringMVC上
    网络基础知识(2)
    网络基础知识 (1)
    线程的安全
    多线程
    字符编码ANSI和ASCII区别、Unicode和UTF-8区别
    序列化对象
    IO流_File类
  • 原文地址:https://www.cnblogs.com/xiepei/p/9919841.html
Copyright © 2011-2022 走看看