移动端适配方案

时间 2021-08-14

标签 html 浏览器 dom ide 布局测试设计 code htm 对象栏目无线繁體版

原文原文链接

为何要作移动端适配？html
- 咱们开发使用px（CSS pixel）的是逻辑像素，以致于在不一样分辨率的设备上同一个UI设计图展现效果会被伸缩变形，因此须要作移动端适配
经过历史进程进一步认识！浏览器
- 早期诺基亚板砖机时代，样式直男单1、设备少（哪一种设备须要即去从新开发一套便可），此时的设备像素比被通俗地固定在1（分辨率：物理像素/发光点），当后续各式尺寸、各式屏幕大小出现，但愿能经过一套代码自适应不一样设备（摸鱼就是第一辈子产力）
  伟大的乔布斯提出了retina display 视网膜屏能够多个物理像素（2*2）构成一个逻辑像素。因此接下来针对不一样分辨率的设备，均可以经过处理设备像素比达到统一逻辑像素分辨率

rem、vw、vh：（等比例缩放）

1 rem = 1 * ducument.ducumentElement.style.fontSize 大多数浏览器默认为 HTML标签 font-size 为 16 pxdom

// 进行一个监听配置
(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';   // 核心代码，这里的值能够自定义设置
    };
   
    if (!doc.addEventListener) return;
       win.addEventListener(resizeEvt, recalc, false);
       doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

<meta name="viewport" content="width=device-width, initial-scale=1.0"> width能够设置定值，调整initial-scale控制缩放比例ide

vw、vh布局

1vw = width * 1% 1vh = height * 1% （这里都是视图宽高）测试

百分比布局方案

距离写百分比 width : 80%;设计

vh、vw讲解code

px （像素 Pixel ）

物理像素：屏幕上的真实可显示的像素点(每个点可单独显示各类颜色，不可在分割)

逻辑像素：2px ==2逻辑像素长度，至关于对物理像素点作了一个抽离、压缩

设备像素比：物理像素/逻辑像素

----------------------------------------分隔线------------------------------------------------------------------htm

浏览器根元素/html的font-size 默认是 16px

px 相对逻辑像素长度，写完了就会固定

因为相对于逻辑分辨率 那逻辑分辨率变化就会引发差错

em 相对当前dom对象的font-size属性，如无则寻找最近的有font-size的父元素

依赖当前dom元素或父元素的font-size 一旦须要调整，找父元素的font-size很麻烦

rem 相对于根html（html文件最外层的html标签）元素的font-size属性

需考虑总体

----------------------------------------分隔线------------------------------------------------------------------对象

代码测试

html {
    font-size: 10px;
  }
  #t1 {
    width: 90px;
    height: 50px;
    background-color: crimson; }
  #t2 {
    font-size: 5px;
    width: 10em;
    height: 10em;
    background-color: darkred;
    margin-left: 2em;}
  #t3 {
    font-size: 50px;
    padding-top: 2rem;
    width: 6rem;
    height: 6rem;
    border: 1px solid black;
  }
  #t4 {
    width: 100%;
    height: 100%;
    background-color: darkblue;}
</style>
<body>
  <div id="t1"></div>
  <div id="t2"></div>
  <div id="t3">
    <div id="t4"></div>
  </div>

vw\vh都是相对于视口

桌面端：浏览器的可视区域(winow.innerHeight)

移动端： Viewport中的Layout Viewport

vw：1vw等于视口宽度的1%

vh：1vh等于视口高度的1%

vmin：选取vw和vh中最小的那个

vmax：选取vw和vh中最大的那个

----------------------------------------分隔线------------------------------------------------------------------

代码测试

#t5 {
    width: 10vw;
    height: 10vh;
    background-color: darkslateblue;}
  #t6 {
    width: 10vmax;
    height: 10vmin;
    background-color: darkturquoise;}
  <div id="t5"></div>
  <div id="t6"></div>
  <script>
    console.log(window.innerHeight);    
  </script>

移动端适配方案

rem、vw、vh：（等比例缩放）

百分比布局方案

px （像素 Pixel ）

物理像素：屏幕上的真实可显示的像素点(每个点可单独显示各类颜色，不可在分割)

逻辑像素：2px ==2逻辑像素长度，至关于对物理像素点作了一个抽离、压缩

设备像素比：物理像素/逻辑像素

浏览器根元素/html的font-size 默认是 16px

px 相对逻辑像素长度，写完了就会固定

因为相对于逻辑分辨率那逻辑分辨率变化就会引发差错

em 相对当前dom对象的font-size属性，如无则寻找最近的有font-size的父元素

依赖当前dom元素或父元素的font-size 一旦须要调整，找父元素的font-size很麻烦

rem 相对于根html（html文件最外层的html标签）元素的font-size属性

需考虑总体

代码测试

vw\vh都是相对于视口

桌面端：浏览器的可视区域(winow.innerHeight)

移动端： Viewport中的Layout Viewport

vw：1vw等于视口宽度的1%

vh：1vh等于视口高度的1%

vmin：选取vw和vh中最小的那个

vmax：选取vw和vh中最大的那个

代码测试

移动端适配方案

rem、vw、vh：（等比例缩放）

百分比布局方案

px （像素 Pixel ）

物理像素：屏幕上的真实可显示的像素点(每个点可单独显示各类颜色，不可在分割)

逻辑像素：2px ==2逻辑像素长度 ，至关于对物理像素点作了一个抽离、压缩

设备像素比： 物理像素/逻辑像素

浏览器根元素/html的font-size 默认是 16px

px 相对逻辑像素长度，写完了就会固定

因为相对于逻辑分辨率 那逻辑分辨率变化就会引发差错

em 相对当前dom对象的font-size属性，如无则寻找最近的有font-size的父元素

依赖当前dom元素或父元素的font-size 一旦须要调整，找父元素的font-size很麻烦

rem 相对于根html（html文件最外层的html标签）元素的font-size属性

需考虑总体

代码测试

vw\vh都是相对于 视口

桌面端：浏览器的可视区域(winow.innerHeight)

移动端： Viewport中的Layout Viewport

vw：1vw等于视口宽度的1%

vh：1vh等于视口高度的1%

vmin：选取vw和vh中最小的那个

vmax：选取vw和vh中最大的那个

代码测试

逻辑像素：2px ==2逻辑像素长度，至关于对物理像素点作了一个抽离、压缩

设备像素比：物理像素/逻辑像素

因为相对于逻辑分辨率那逻辑分辨率变化就会引发差错

vw\vh都是相对于视口