移动端适配方案

  • 为什么要做移动端适配?

    • 我们开发使用px(CSS pixel)的是逻辑像素,以至于在不同分辨率的设备上同一个UI设计图展示效果会被伸缩变形,所以需要做移动端适配
  • 通过历史进程进一步认识!

    • 早期诺基亚板砖机时代,样式直男单一、设备少(哪种设备需要即去重新开发一套即可),此时的设备像素比被通俗地固定在1(分辨率:物理像素/发光点),当后续各式尺寸、各式屏幕大小出现,希望能通过一套代码自适应不同设备(摸鱼就是第一生产力
      伟大的乔布斯提出了retina display 视网膜屏可以多个物理像素(2*2)构成一个逻辑像素。所以接下来针对不同分辨率的设备,都可以通过处理设备像素比达到统一逻辑像素分辨率

rem、vw、vh:(等比例缩放)

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

// 进行一个监听配置
(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控制缩放比例

vw、vh

1vw = width * 1% 1vh = height * 1% (这里都是视图宽高)

百分比布局方案

距离写 百分比 width : 80%;

vh、vw讲解

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属性

需考虑整体

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


代码测试
  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>

https://juejin.cn/post/6953091677838344199#heading-12
https://juejin.cn/post/6844903631993454600#heading-16

移动端适配方案

上一篇:64位win7系统,IE10,IE11停止工作,显示urlmon.dll模块故障


下一篇:H5调用android相机拍照