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>

     

     

     

     

  • 相关阅读:
    Android 学习笔记之WebService实现远程调用+内部原理分析...
    Android学习笔记之Json的使用....
    Android学习笔记之DocumentBuilder的使用....
    Android学习笔记之ExecutorService线程池的应用....
    Android学习笔记之SoftReference软引用...
    windows系统获取进程的pid号并终止
    Linux系统的时间比北京时间慢12个小时的处理方案(将EDT时区改为CST)
    将java的jar包作为windows的服务来启动
    linux初始化shell脚本
    linux中网络部分的总结
  • 原文地址:https://www.cnblogs.com/xiepei/p/9919841.html
Copyright © 2011-2022 走看看