美文网首页
rem的最新适配(淘宝)之1px像素的问题解决

rem的最新适配(淘宝)之1px像素的问题解决

作者: 焚心123 | 来源:发表于2022-03-08 11:10 被阅读0次
  • 解决了在微信上1px像素的问题,这是整体js文件,不过要自己加meta移动端头部标签,这里的rem是除以10

  • 在css中直接写1px就可以了,其他的都用rem

  border: 1px solid gray;
<meta name="viewport" id="WebViewport"
        content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  (function flexible (window, document) {
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1
  
    // adjust body font size
    function setBodyFontSize () {
      if (document.body) {
        document.body.style.fontSize = (12 * dpr) + 'px'
      }
      else {
        document.addEventListener('DOMContentLoaded', setBodyFontSize)
      }
    }
    setBodyFontSize();
  
    // set 1rem = viewWidth / 10
    function setRemUnit () {
      var rem = docEl.clientWidth / 10
      docEl.style.fontSize = rem + 'px'
    }
  
    setRemUnit()
  
    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function (e) {
      if (e.persisted) {
        setRemUnit()
      }
    })
  
    // detect 0.5px supports
    if (dpr >= 2) {
      var fakeBody = document.createElement('body')
      var testElement = document.createElement('div')
      testElement.style.border = '.5px solid transparent'
      fakeBody.appendChild(testElement)
      docEl.appendChild(fakeBody)
      if (testElement.offsetHeight === 1) {
        docEl.classList.add('hairlines')
      }
      docEl.removeChild(fakeBody)
    }

    var viewport = document.querySelector("meta[name=viewport]");
        var dpr = window.devicePixelRatio || 1;
        var scale = 1 / dpr;
        //下面是根据设备dpr设置viewport
        viewport.setAttribute(
            "content",
            "width=device-width,initial-scale=" +
            scale +
            ", maximum-scale=" +
            scale +
            ", minimum-scale=" +
            scale +
            ", user-scalable=no"
        );

  }(window, document))
  • 这是单个的小文件,也可以兼容1px的问题

     var viewport = document.querySelector("meta[name=viewport]");
        var dpr = window.devicePixelRatio || 1;
        var scale = 1 / dpr;
        //下面是根据设备dpr设置viewport
        viewport.setAttribute(
            "content", +
            "width=device-width," +
            "initial-scale=" +
            scale +
            ", maximum-scale=" +
            scale +
            ", minimum-scale=" +
            scale +
            ", user-scalable=no"
        );
 
        var docEl = document.documentElement;
        var fontsize = 10 * (docEl.clientWidth / 750) + "px";
        docEl.style.fontSize = fontsize;

相关文章

  • rem的最新适配(淘宝)之1px像素的问题解决

    解决了在微信上1px像素的问题,这是整体js文件,不过要自己加meta移动端头部标签,这里的rem是除以10 在c...

  • 移动端适配方案

    @description 该方法是用于移动端适配功能, 结合淘宝的适配方案flexible + rem 实现适配,...

  • rem适配

    chrome浏览器字体默认16px 最小12px em rem rem适配 viewport 1物理像素的实现

  • 2020-10-30 web移动端

    web移动端 1.重点:适配 2.目标:掌握4种适配方案 ( 流式布局、弹性布局、响应式布局、像素适配(rem适配...

  • 2019-11-28 -今日头条屏幕适配方案,theme属性定制

    今日头条的屏幕适配 需提前掌握名称含义 名称含义px像素,1px代表屏幕上的一个像素点dp设备无关像素dpi每英寸...

  • 1px问题

    2019-05-20-10:17:于公司 为了适配各种屏幕,有的设备上1px会看起来大于1px,被多个物理像素渲染...

  • 一分钟告诉你rpx rem 与微信关系

    关键之 :px 像素 rpx 微信 rem em 适配 开始写这文章,也是这两天遇到了个小问题,网上找了些答案,但...

  • 移动端rem适配

    三:多屏适配布局问题 出处:【原创】移动端高清、多屏适配方案 再谈移动端适配和点5像素的由来 使用相对单位:rem...

  • 移动端之js控制rem,适配字体

    移动端之js控制rem,适配字体

  • 2019-07-31

    PostCSS的插件 -- 关于vue rem适配布局方案 PostCSS的插件 作用:用于自动将像素单元生成re...

网友评论

      本文标题:rem的最新适配(淘宝)之1px像素的问题解决

      本文链接:https://www.haomeiwen.com/subject/siogdktx.html