2移动端与pc端的区别

  1. 系统
    1. PC windows/mas（区别不大）
    2. 移动端 ios/android/windows（有区别）
  2. 浏览器
    1. PC（区别很大）
    2. 移动端（区别不大）
  3. 分辨率（尺寸）
    1. PC（有区别）
    2. 移动端（区别很大）

3设备像素 物理像素

  1. 屏幕的物理像素，任何设备屏幕的物理像素的数量都是固定的不变的，单位是pt（点）
  2. 一般指的是手机的分辨率
  3. 1pt = 1/72英寸（inch）

4屏幕尺寸

  1. 值得是屏幕对角线的长度
  2. 注意英寸是长度单位，不是面积单位
  3. 1英寸 = 2.54厘米（cm）
  4. 屏幕尺寸=屏幕斜边的像素/ppi

7viewport设置

  • width 视口的宽度
    • 值为一个正整数或字符串“device-width”(设备的实际的宽度—-css像素)。不建议设置数字(安卓设备有些不支持)
  • height 视口的高度
  • user-scalable 是否允许用户进行页面缩放
    • 值为no或yes
  • initial-scale 页面初始缩放值
    • 值为一个数字 可以带小数
  • minimum-scale 页面最小能够缩放的比例
  • maximum-scale 页面最大能够缩放的比例

移动端 配置meta

  1.     <meta
  2.       name="viewport"
  3.       content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
  4.     />

9样式重置

-webkit-user-select：none； 禁止用户选中文字 安卓无用
-webkit-touch-callout：none 禁止长按弹出系统菜单
-wekit-text-size-adjust：100%
-webkit-tap-heighlight-color:rgba0,0,0,1)
-webkit-appearance:none

10适配

适配的元素

  1. 字体
  2. 宽高
  3. 间距
  4. 图像（图标、图片）

适配的方法

  1. 百分比适配
  2. viewport缩放
  3. DPR缩放
  4. rem适配
  5. vw、vh适配

定义meta 的niewport适配

(function () {
  // 获取css像素(viewport没有缩放 )
  var curWidth = document.documentElement.clientWidth;
  var curWidth = window.innerWidth;
  var curWidth = window.screen.width;

  var targetWidth = 375;
  var scale = curWidth / targetWidth;

  var view = document.getElementById("view");
  view.content = `initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`;
      })();

14em rem

em

作为font-size的单位时，其代表父元素的字体大小，作为其他属性单位时，代表自身字体大小
font-size：20px 1em = 20px
问题：

  1. chrom下有最小字体限制，必须为12px， 所以这个值不能小于12px
  2. 如果两个一样的元素，但是里面字体不一样，那就能统一设置了，或者元素字体变化了，就又要统一设置一遍

rem

css3新增的一个相对单位，是相对于根元素字体大小
r root
html{font-size:20px} 2rem = 40px

根据不同的移动设备 设置不同的root font-size

(function (doc, win, designWidth) {
        const html = doc.documentElement;
        const refreshRem = () => {
          const clienWidth = html.clientWidth;
          if (clienWidth >= designWidth) {
            html.style.fontSize = "100px";
          } else {
            html.style.fontSize = 100 * (clienWidth / designWidth) + "px";
          }
        };
        doc.addEventListener("DOMContentLoaded", refreshRem);
      })(document, window, 750);