zoukankan      html  css  js  c++  java
  • px-rem自适应转换

    当前团队开发过程,存在2种度量单位(px、rem)各有说辞
    px:各个终端统一大小,简单明了,未尝不可!
    rem:大屏幕显示大字体,小屏幕显示小字体,渐进增强视觉感。
    业界各种写法都有,不逐一讨论。
    团队呼声:使用rem,达到字体渐进增强视觉感。
    得出一套简洁的rem计算自适应方法!大喜!

    核心换算片段如下
    ---------------------------------------------
    <script>
    function Rem() {
    var docEl = document.documentElement,
    oSize = docEl.clientWidth / 6.4;

    if (oSize > 100) {
    oSize = 100; // 限制rem值 640 / 6.4 =100
    }

    docEl.style.fontSize = oSize + 'px';
    }
    window.addEventListener('resize', Rem, false);
    Rem();
    </script>

    ---------------------------------------------------

    A: oSize = docEl.clientWidth/7.5; //设计稿默认750px宽度,这样7.5,如果设计稿是640px宽度,这个7.5就修改6.4

    B: if(oSize>85){
    oSize = 85; // 限制rem值 640 / 7.5 ≈ 85
    }
    640是max-640px这样的屏幕宽度,7.5是设计搞是750px
    如果设计稿是 640px.则 640/6.4这样去
    一把移动端页面 在 body处 设置 max-640px

    如上加入这段代码,下面写单位的时候,直接按照PSD里面的标准大小除以100即可。
    如:标注28px.则写 0.28rem即可!
    自适应,体验性!beautiful!在各个终端完全自适应大小!伸缩自如!

    媒体查询?那么一大段?分批次去写?NO,NO,NO.还得去适配。
    工具换算?NO,NO!还得安装插件。

    有了此REM()代码片段,再也不用担心产品,UI说这里小,那里大,不信?你试试!

    附件有详细参考demo,包含了reset样式及对应的rem自适应demo.还有flex对齐实现左中右自适应对齐的demo

    如下图所示

    ----------------------------

    --

    ------------------------------------------

    多谢 江华(一棵树)的rem思想,多谢白树flex的对齐.互联网,有你很好!仅此备份,学习参考

    下载地址:http://files.cnblogs.com/files/leshao/px-rem%E8%87%AA%E9%80%82%E5%BA%94%E8%BD%AC%E6%8D%A2.rar

  • 相关阅读:
    金融数据获取的api接口
    股票实时数据接口
    【C#】通过webbrowser控件自动注册QQ号讲解
    【C#】通过webbrowser控件获取验证码
    光圈,快门, 曝光,焦距, ISO,景深。
    装修记录
    cocos2dx在win10系统上的VS2017运行时报错:丢失MSVCR110.dll
    论打击的本质(2)-视觉理论及应用篇
    论打击感的本质(1)——力的理论及应用
    android屏幕适配详解
  • 原文地址:https://www.cnblogs.com/leshao/p/5674710.html
Copyright © 2011-2022 走看看