移动端适配

基础知识点

1 单位相关:
--------------------------------------------------------------------
  1 % 相对父元素
  2 em 相对父元素的字体大小
  3 rem 相对html的字体大小
  4 vw 视口宽度 100vw  
  5 vh 视口高度 100vh
--------------------------------------------------------------------

2 理解:
--------------------------------------------------------------------
1 解决移动端适配, 需要考虑的因素
  1 容器: rem
  2 图片: 
  3 字体: rem

2 移动端开发的方案选择

  1 单独制作移动端页面
    1 rem适配: 配合媒体查询, 根据不同的屏幕尺寸, 设置不同的html字体大小, 达到控制 rem大小的效果
    2 流式布局: (百分比布局) -- 针对容器宽度
    3 通过JS配置文件, 实现移动端适配 (最常用的方式)
    
  2 响应式PC端页面 -- 兼容移动端:
    1 媒体查询 -- 可以监听屏幕尺寸的变化
    2 Bootstarp

3 独立移动端页面 vs 响应式PC端页面
  1 响应式PC端: 制作麻烦, 体验不流畅, 非主流
  2 独立移动端: 制作方便, 体验好, 主流的方案

4 移动端相关操作
  1 -webkit-tap-highlight-color: transparent;  //点击亮样式清除
  2 -webkit-appearance: none;  //移动浏览器默认外观, 在ios上加上这个属性才能给按钮和输入框自定义样式;
  3 img, a{ -webkit-touch-callout: none;}  //禁用长按页面时的弹出菜单
  
5 关于图片的问题:

  1 相关理解:
    1 分辨率 == 物理像素点
    2 物理像素点是屏幕显示的最小颗粒也就是1分辨率
    3 物理像素比 == 1px距离单位, 对应的物理像素点 / 开发像素 1px
    4 像素是距离单位 -- 物理像素点是显示画面的最小颗粒
    5 我们为了在指定距离 -- 展示更高的分辨率(更清晰) -- 会在1px的距离放置尽可能多的物理像素点
    6 PC端 1px 的单位距离 == 1个物理像素点;
    7 移动端 1px 的单位距离 == 2或多个物理像素点;
    
  2 使用二倍图的原因:
    1 UI 设计图中 50px 的图片, PC端对应50个物理像素点 (没有问题)
    2 UI 设计图中 50px 的图片, 移动端对应, 100或更多个物理像素点 (需要放 100px或更高像素的图片)
    3 作用: 就是防止图片在移动端会存在显示模糊的问题 (相当于把图片放大了看)

  3 如何处理这个问题呢
    1 UI 在设计移动端图片的时候, 要把图片的px设置的大一些 (没前端什么事)

6 相关标签的作用:
  1 <meta name="viewport" content="width=device-width, initial-scale=1.0">
    1 width=device-width   //让可视区的宽度等于设备的宽度

7 移动端相关理解:
  1 哈哈哈, 还没想好😁
  2 移动端适配最常用的就是下面的, 通过 JS配置文件来动态改变, 根元素(html)的字体大小
  3 深入研究的话, 还右特别多的适配解决方案
--------------------------------------------------------------------

移动端适配 1

1 配置代码  //老陶的移动端适配, JS配置文件
--------------------------------------------------------------------
// 移动端适配方案: 以750px设计稿为基准, 1rem = 100px, eg: 50px -> 0.5rem
;(function (document, window) { 
  let designWidth = 750;  // 设计稿的宽度 -- 根据设计稿进行调整
  let deviceWidth = document.documentElement.clientWidth;  // 设备宽度 / 可视区宽度
  document.documentElement.style.fontSize = deviceWidth / designWidth * 100 + 'px'; //得到根元素字体大小
  
  window.onresize = function () {  //当窗口发生变化的时候, 重置根元素字体大小
    document.documentElement.style.fontSize = deviceWidth / designWidth * 100 + 'px';
  }
})(document, window)
--------------------------------------------------------------------

2 初始化操作
--------------------------------------------------------------------
1 该 JS 配置文件的理解  //只用于辅助理解
  1 当可视区宽度为设计稿宽度的时候 (当前: 750px), html 的字体大小为 100px
  2 当可视区宽度为设计稿宽度的时候 (当前: 640px), html 的字体大小为 100px
  3 当设备的可视区宽度不到 750px 的时候, html 的字体大小也会不到 100px 
  4 当设备的可视区宽度为 375px 的时候, html 的字体大小为 50px
  5 就是会根据设备可视区的大小, 动态的设置根元素字体的大小
  
2 初始化配置
  1 在配置代码中, 设置设计稿的宽度
  2 把配置代码放在, index.html 可用到的位置就可以了 (直接放在该html文件中也可行)

3 CSS 中如何使用
  1 设计稿的像素 200px, 我们写 2rem 就OK了  (200/100)
--------------------------------------------------------------------

移动端适配 2

1 配置代码  //老夏的移动端适配, JS配置文件
--------------------------------------------------------------------
// 移动端适配方案: 
function resetRootFZ() {  //重置根元素的字体
  var oHtml = document.querySelector('html')
  var w = oHtml.getBoundingClientRect().width  // px
  oHtml.style.fontSize = w/10 + 'px'  // 设置根字体的大小等于html节点的宽度的十分之一
}

resetRootFZ()
window.addEventListener('resize',function(){  //当window窗口尺寸变化时，重新设置根字体的大小
  resetRootFZ()
})
--------------------------------------------------------------------

2 初始化操作
--------------------------------------------------------------------
1 该 JS 配置文件的理解 + CSS 中的使用(3+4)
  1 无论移动端设备多大, 根元素(html)字体大小都等于屏幕宽度总像素的十分之一
  2 所以无论在哪个设备下, 10rem 就等于占满全屏的宽度, 5rem == 就是设备可视区宽度的一半
  3 UI设计图为 750px 的时候, 1rem == 750/10 == 75px
  4 根据 750px的 UI设计图, 设置 50px的时候, 我们写 0.67rem 就OK了  (50/75)
  5 我们设置的 rem 是通过, 实际像素 / 设备可视区 10分之一的像素, 得到的

2 初始化配置 
  1 根据 UI设计稿的宽度, 得到 1rem 对应的像素大小
  2 把配置代码放在, index.html 可用到的位置就可以了 (直接放在该html文件中也可行)
  
3 VSCode 配合相关插件  (作用: 自动计算 UI设计稿的像素对应的是多少 rem)
  1 插件名称: px to rem & rpx (cssrem)
  2 插件配置: 设置 -> 搜索 cssrem -> Cssrem: Root Font Size (设置为 75)
  3 重启VSCode生效 (上面设置的值为, 当前UI设计搞, 1rem 对应的像素大小)
--------------------------------------------------------------------