The blog from jeesedear

blog's People

Watchers

blog's Issues

22222

iPhone屏幕尺寸和分辨率的相关知识 ( DPI vs PPI pt vs px)

https://www.jianshu.com/p/13d6db922ac7

rider 是基于 Stylus 与后处理器、无侵入风格的 CSS 样式工具库。

https://www.npmjs.com/package/rider

用于h5rem适配开发

初始化设置基本字体及其他基本样式

@require('~rider/lib/rider/index.styl')
// 基础配置信息
$-base-font-size = 16px
$-bg-color = #f5f5f5
$-main-color = #fc8700
$-grey-color-1 = #333
$-grey-color-2 = #666
$-grey-color-3 = #999


// 设置背景图片
mbg($src, $size = 100% 100%, $position = 0 0, $repeat = no-repeat)

  if not file-exists($src)
    error('$src 必须为本地已存在的图片路径：' + $src)

  background-image: url($src)
  background-size: $size
  background-position: $position
  background-repeat: $repeat
// 设计定了个UI规范，基础宽度 720，原因是 线上安卓设备居多
arem($value, $design=720)
  rem(round($value * 375 / $design , $-unit-precision))

html初始化依据基础宽度设置基本字体大小（默认以iphone6尺寸为基准进行缩放）

  <script type="text/javascript">
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 16 * (clientWidth / 375) + 'px';
                };
            recalc();
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>