H5适配移动端，简洁方案

最新推荐文章于 2024-04-13 13:14:42 发布

大炮走火

最新推荐文章于 2024-04-13 13:14:42 发布

阅读量337

点赞数

分类专栏： htm 文章标签： javascript js css vue html

本文链接：https://blog.csdn.net/u010775335/article/details/110822205

版权

htm 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了如何利用REM单位和设备像素比（dpr）进行移动端页面的响应式布局。通过设置HTML根元素的字体大小，动态计算元素尺寸与设计图的比例，实现不同屏幕尺寸下元素的适配。同时，针对iOS设备的0.5px边框问题进行了处理，并提供了在窗口大小改变时重置REM单位的方法。确保在不同分辨率设备上保持视觉一致性。

摘要由CSDN通过智能技术生成

方法引用了flexible源码

 var docEl = document.documentElement
 var dpr = window.devicePixelRatio || 1
  // 设置 1rem = 屏幕宽度的十分之一
  // 因此如果设计图宽 = 750px
  // 一个按钮的宽度为75px时，那么等于 75 / 750 = 1rem
  // 因此很简单，rem = 元素大小 / 设计图宽度
  function setRemUnit() {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }
  setRemUnit()
  
  // 调整body的fontsize，不跟随html的fontsize，因为html的fontsize会动态变化
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();
  
  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  //适配iOS，retain屏
  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)
  }

注意还需要在<head>中添加

    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

使用方法：
1.将上述两点放置到项目中
2.没有设计图参考时，rem实际是百分比，1rem = 10%;
3.有设计图时，假设计图背景大小为750，按钮大小为75，那么75 / 750 = 1rem
通用公式为，x(rem) = 元素大小 / 设计图大小
可以用sass方法来自动计算，或是插件自动转换rem

大炮走火

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5适配移动端，简洁方案

方法引用了flexible源码 var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // 设置 1rem = 屏幕宽度的十分之一 // 因此如果设计图宽 = 750px // 一个按钮的宽度为75px时，那么等于 75 / 750 = 1rem // 因此很简单，rem = 元素大小 / 设计图宽度 function setRemUnit() { var rem = docEl
复制链接

扫一扫