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>

     

     

     

     

  • 相关阅读:
    ASP.NET MVC框架(第四部分): 处理表单编辑和提交场景 【转】
    ASP.NET MVC框架 (第二部分): URL路径选择 【转】
    ASP.NET MVC框架(第三部分): 把ViewData从控制器传到视图 【转】
    SNS介绍
    测试代码在实际类的内部写还是外部写的思考
    敏捷开发:软件与文档
    TDD是开发方法还是开发方法学?
    命名空间元素的封装性
    个人感觉
    呜呜....可惜...呜呜,也谈谈测试驱动开发
  • 原文地址:https://www.cnblogs.com/xiepei/p/9919841.html
Copyright © 2011-2022 走看看