移动端适配

最新推荐文章于 2024-06-16 17:35:36 发布

蟑螂大道

最新推荐文章于 2024-06-16 17:35:36 发布

阅读量406

点赞数

分类专栏： html/css 文章标签： css html css3 前端 html5

本文链接：https://blog.csdn.net/qq_43551056/article/details/130766532

版权

html/css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章介绍了CSS中的绝对单位和相对单位，重点讨论了像素与分辨率、DPR和PPI的概念。在移动设备上，布局视口、视觉视口和理想视口的区别被阐述，并提出了使用百分比、rem单位和vw/vh单位进行移动端适配的方法，包括手动计算、Less/SASS预处理器以及postcss插件的自动转换工具。

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

css常见单位

绝对单位

绝对单位常用于实物或打印中
在这里插入图片描述

相对单位

在这里插入图片描述

像素与分辨率

物理像素
显示器等硬件的真实像素，出厂前固定。设备分辨率一般指物理像素。
逻辑像素
开发者面向逻辑像素开发。操作系统将不同分辨率的设备统一抽象为1920x1080，此时1px相对于逻辑像素1920x1080。
例如2K、4K的显示器都将逻辑分辨率设置为1920x1080。但是4K显示画面更加细腻。因为1逻辑像素包含更多的物理像素。
CSS像素
默认情况为逻辑像素。

DPR、PPI

DPR(device pixel ratio)设备像素比=物理像素/逻辑像素
PPI(pixels per in) 每英寸物理像素

视口

PC端：布局视口和视觉视口是同一个
移动端视口：

布局视口（layout viewport）

PC端网页在移动端显示时，默认相对于布局视口。为了完整显示网页，会缩小网页。
布局视口默认宽度980px

视觉视口（visual viewport）

理想视口（ideal viewport）

当视觉视口 = 视觉视口时，称为理想视口

修改布局视口大小

<!-- 
  width=device-width 设置布局视口宽度=设备宽度
 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

在这里插入图片描述

移动端适配

100px在300px屏幕下占1/3，在400px屏幕下占1/4。若想在400px屏幕下相应的放大盒子，则不能使用绝对单位px，使用相对单位。

百分比布局
不同属性有不同的参照物，不好统一。
rem
rem单位+动态html的font-size
lib-flexibl库

(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)
  }
}(window, document))