1px线和rem配置移动端自适应配置

小知识总结 专栏收录该内容
2 篇文章 0 订阅

1px线

其实在stylus与sass中实现移动端1像素线各个手机设备的适配问题的原理是一样的,
首先我还是先介绍一下原理和所依赖的方法
原理:其实他们都是通过css3的媒体查询来实现的

步骤思路:
1、给目标元素进行相对定位
2、给目标元素添加伪元素 ::after/before 并进行绝对定位
3、判断DPI 1DPI 100% --------------使用媒体查询

                  2DPI   200%

                  3DPI   300%

4、通过css3中的transform scale等比缩放

下面是具体的代码,使用时只需引入代码 在style里直接写 border: 1px 0 0 0, #ccc 即可使用

在stylus中

border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0)
  // 为边框位置提供定位参考
  position: relative;

  if $border-width == null
    $border-width: 0;

  border-radius: $radius;

  &::after
    // 用以解决边框layer遮盖内容
    pointer-events: none;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    // fix当元素宽度出现小数时,边框可能显示不全的问题
    // overflow: hidden;
    content: "\0020";
    border-color: $border-color;
    border-style: $border-style;
    border-width: $border-width;
    
    // 适配dpr进行缩放
    @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx)
      width: 100%;
      height: 100%;
      if $radius != null {
        border-radius: $radius;
      }
    
    @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)
      width: 200%;
      height: 200%;
      transform: scale(.5)
      if $radius != null {
        border-radius: $radius * 2;
      }
    
    @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi),(min-resolution: 2.5dppx)
      width: 300%;
      height: 300%;
      transform: scale(.33333)
      if $radius != null {
        border-radius: $radius * 3;
      }

    transform-origin: 0 0;

在sass中

@mixin border($border-width: 1px, $border-color: map-get($base, border-color), $border-style: solid, $radius: null) {
    // 为边框位置提供定位参考
    position: relative;
    @if $border-width == null {
        $border-width: 0;
    }
    border-radius: $radius;
    &::after {
        // 用以解决边框layer遮盖内容
        pointer-events: none;
        position: absolute;
        z-index: 999;
        top: 0;
        left: 0;
        // fix当元素宽度出现小数时,边框可能显示不全的问题
        // overflow: hidden;
        content: "\0020";
        border-color: $border-color;
        border-style: $border-style;
        border-width: $border-width;
        // 适配dpr进行缩放
        @include responsive(retina1x) {
            width: 100%;
            height: 100%;
            @if $radius != null {
                border-radius: $radius;
            }
        }
        @include responsive(retina2x) {
            width: 200%;
            height: 200%;
            @include transform(scale(.5));
            @if $radius != null {
                border-radius: $radius * 2;
            }
        }
        @include responsive(retina3x) {
            width: 300%;
            height: 300%;
            @include transform(scale(.33333));
            @if $radius != null {
                border-radius: $radius * 3;
            }
        }
        @include transform-origin(0 0);
    }
}

在component中

import styled from 'styled-components'

const border = ({
    component = null,
    width = '1px',
    style = 'solid',
    color = '#ccc',
    radius = 0,
}) => {
    return styled(component) `
    position: relative;
    border-width: ${ width};
    border-radius: ${ radius + 'px'};
    &::after {
      pointer-events: none;
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;
      content: "";
      border-color: ${ color};
      border-style: ${ style};
      border-width: ${ width};

      @media
        (max--moz-device-pixel-ratio: 1.49), 
        (-webkit-max-device-pixel-ratio: 1.49), 
        (max-device-pixel-ratio: 1.49), 
        (max-resolution: 143dpi), 
        (max-resolution: 1.49dppx) {
          width: 100%;
          height: 100%;
          border-radius: ${ radius + 'px'};
        };
      
      @media 
        (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), 
        (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
        (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
        (min-resolution: 144dpi) and (max-resolution: 239dpi),
        (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
          width: 200%;
          height: 200%;
          transform: scale(.5);
          border-radius: ${ radius * 2 + 'px'};
        };
      
      @media 
        (min--moz-device-pixel-ratio: 2.5), 
        (-webkit-min-device-pixel-ratio: 2.5),
        (min-device-pixel-ratio: 2.5), 
        (min-resolution: 240dpi),
        (min-resolution: 2.5dppx) {
          width: 300%;
          height: 300%;
          transform: scale(.33333);
          border-radius: ${ radius * 3 + 'px'}
        };

        transform-origin: 0 0;
    };
  `
}

export default border

亲自使用过超级好使

移动端自适应配置

  • rem配置
    • 网易方案
       /* 
       * 配置rem
       */
    
       function font () {
       document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75  + 'px'
       }
    
       font() // 表示页面一开启就转换单位 
    
    
       window.onresize = font  // 表示页面尺寸发生改变时,再次计算rem
    
    • 淘宝方案
       /* 
       通过js来动态添加rem 
       */
    
       (function(designWidth, maxWidth) {
          var doc = document,
          win = window,
          docEl = doc.documentElement,
          remStyle = document.createElement("style"),
          tid;
    
          function refreshRem() {
             var width = docEl.getBoundingClientRect().width;
             maxWidth = maxWidth || 540;
             width>maxWidth && (width=maxWidth);
             var rem = width * 100 / designWidth;
             remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
          }
    
          if (docEl.firstElementChild) {
             docEl.firstElementChild.appendChild(remStyle);
          } else {
             var wrap = doc.createElement("div");
             wrap.appendChild(remStyle);
             doc.write(wrap.innerHTML);
             wrap = null;
          }
          //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
          refreshRem();
    
          win.addEventListener("resize", function() {
             clearTimeout(tid); //防止执行两次
             tid = setTimeout(refreshRem, 300);
          }, false);
    
          win.addEventListener("pageshow", function(e) {
             if (e.persisted) { // 浏览器后退的时候重新计算
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
             }
          }, false);
    
          if (doc.readyState === "complete") {
             doc.body.style.fontSize = "16px";
          } else {
             doc.addEventListener("DOMContentLoaded", function() {
                doc.body.style.fontSize = "16px";
             }, false);
          }
       })(375, 750); 
    
       // 备注: 这里的375本身就应该写成750 ,但是写成750之后,我们设计稿的尺寸要/50,不好算,我就想,除以100更好算,所以我改成了375
    
    • 阿里方案
        (function(doc, win) {
        const docEl = doc.documentElement,
           resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
           recalc = function() {
              const clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              let max = 24;
              let min = 9.3125;
              let size = 20 * (clientWidth / 320);
      
              size = Math.min(size, max);
              size = Math.max(size, min);
              docEl.style.fontSize = size + 'px';
              console.log(docEl.style.fontSize, 'em= =====')
           };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
      
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值