web前端移动开发必须知道那些基础

---

概述

有一阵子没写博客了，学习了移动开发一段时间，发现从PC网页到Mobile网页还是区别挺大的，PC考虑的事情没Mobile那么多。因为手机端的设备像素实在是乘次不齐，各种各样。今天比较闲一些，就来说一下咱们前端在开发移动网页的时候都需要注意些什么东西。

---

流行的移动端布局

首先来说说现在比较流行的布局，一共有4种：

百分比布局
flex布局
rem布局
viewport

先来讲讲这四个布局吧

---

百分比布局

首先来说说百分比布局，在我本人使用的时候，就感觉有个致命的缺点：%是参考父级的

.box {
  width: 50%;
  background: #999;
  color: #fff;
  
  .box1 {
    width: 50%;
    height: 50%;
    background: #666;
    
    .box2 {
      width: 50%;
      height: 50%;
      background: #333;
    }
  }
}

效果：

如图，这三个盒子都是设置成了50%的宽高，相互嵌套，每个盒子都参考上一个盒子的大小来。这会导致一个问题：如果你想用百分比设置某一部分的宽高，那么你 需要保证其父级、父级的父级……即祖先元素都要有百分比。 这显然是不明智的。

不过，在某些情况下，百分比还是挺好用的，比如京东移动端就用到了百分比布局。

---

rem布局

我个人比较喜欢flex布局和rem布局，flex布局应该就不用多说了，在PC端都是很常使用的，今天还是主要说说rem布局。
rem，第一个r的意思是root，用过rem的朋友都知道rem是相对于根元素html而言的，

1rem = 1 × html.style.fontSize

是的，你会发现，如果你想改变1rem的大小，你可以修改根元素的字体大小即可。

rem布局的优点也就体现在这里了，rem的参考只有一个，它不像%那样参考父级，rem直接参考根元素。另外，它的比例能够按需修改，比如 苏宁移动端，它就是用了rem布局来实现的。

可是，将font-size设置死也不是解决办法呀，这里我们用到了flexible，flexiblejs是淘宝做出的用于解决移动端适配问题的js框架。

flexiblejs可以到github上查看：github_flexible.js_淘宝

原理也很简单

就是获取你的设备的像素，然后等分成若干份，让1rem=1份就行了。
比如说你的设备是750px的，分成10份，就是每份75px，那么我们将 html { font-size: 75px } 这样就实现了1rem = 75px，也就是说 10rem 就能占满你的屏幕了。

我这里也实现了一个简易版的flexiblejs，我叫它为resizeablejs

function resize() {
  let rem = document.documentElement.clientWidth / 25;
  document.querySelector('html').style.fontSize = rem + 'px'
}
window.onload = function () {
  resize()
}
window.onresize = function () {
  resize()
}

这样，在你改变视图的时候，1rem的值也会跟着改变，从而改变对应的大小，这能让你的页面跟设计图保持高度一致。

---

viewport

viewport这里也不说了，1vw≠1vh，不是特别好用，但是vw vh的优点就是基于viewport！想必将来改进后肯定很受欢迎！

---

end 骚话

好的，今天的分享就到这里，草草了事的结尾了哈哈哈，大家共勉哈~

下班不积极，脑子有问题！