移动web开发浅谈之那些我们需要知道的基础

前言

开发生涯总是丰富多采，工作多年，不同领域还是逃不过雨露均沾，之前开发过android，微信，ios，web网站也玩过。但是对于移动web这一块，确实没有专门很深入的学习，现在需要做了，也将自己的学习过程记录下来，供大家互相学习，说的不对，可以报警。

正文

概念

本次要谈的移动web不是web app，只是很普通的移动端的web界面。
移动web可以这么理解：就是把以前在pc上的界面搬到移动端（为了说明方便，我下面统称之为手机）来操作，展示，这样解释没毛病。

默认行为

作为之前开发pc端的人员，第一反应就是如何把那么大的pc界面内容展现到手机小小的屏幕上。其实我们可以先做一个实验，用手机访问一个pc的界面，我们会发现手机的将整个界面的缩小到整个手机界面，需要放大才能看清所有的内容。
这里面有个viewport的概念，其实手机浏览器帮我们做了一个事情，他会提供一个viewport,以ios 8为例，它提供了一个960px宽的viewport来放置我们的pc界面，这样的目的是为了保持pc的界面的不错乱，然后将这viewport（布局viewport）整体缩放到手机屏幕（设备宽度）的大小（度量的viewport）可视范围。

viewport设置

所以这样的方式是不合适我们开发的，所以我们需要设置一下meta

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalabel=no">

以上设置是
［布局的viewport］＝［设备宽度］＝［度量的viewport］
这样我们设计出来的界面才会比较直观的显示在手机上，而不需要考虑缩放问题

高效移动web布局

我只是简单的介绍两种布局的大概，以及优缺点，具体的还需要各位百度了解详情了，毕竟一两句话说不清楚

一：Flexbox弹性盒子布局

这个布局方式就是顾名思义，是对一个盒子的弹性设置，你可以在里面设置内容的占用空间情况比例设置，排放位置等等。
优点：比较的方便，排列出你想要的适配效果。
缺点：存在兼容性问题，特别是android4.4以下只兼容老版本的Flexbox.(老版本叫Flexbox，新版本就叫Flex)，所以还是推荐使用老版本的Flexbox。

二：响应式设计

响应式布局是靠（媒体查询）来实现的，所谓媒体查询就是样式判断当前的运行环境（屏幕宽高，设备宽高，横屏竖屏）来配置不同的样式来显示。
它有三个设计点
1.百分比布局
什么意思呢，就是不同的屏幕，宽度不可控，所以在布局的时候尽量采用百分比的方式放置元素来兼容不同的屏幕
2.弹性图片
这个解释就是当屏幕大于一定的宽度的时候，你可以展示一个固定大小的图片，当你检测出屏幕很小的时候，就要让这个图片适当的按百分比缩放，才有更好的体验布局效果，跟第一种百分比布局不太一样，细细体会
3.重新布局，显示与隐藏
这个就是大招了，就是检测不一样的界面宽高参数，直接大动作调整不同的排版结构，和一些小屏幕上面不太重要模块的隐藏操作。
这三个设计点事响应式布局非常常用的方式，让我们了解一下他的利弊吧
优点：可以说是一本万利，一个界面适应了所有的设备，减少了重复开发。
缺点：因为他加载了所有设备端的样式，管你用不用，毕竟当你在手机端条件比较差的时候，加载多余的样式，流量，性能等方面不是最优的。

特别样式处理

我这里简单的说明一些情况，大家可以有个印象即可，解决方式很多

高清图片

为了避免图片产生模糊，图片的宽高应该用物理像素渲染，即是100＊100的图片应该使用100dp*100dp。
width:(w_value/dpr)px;
height:(h_value/dpr)px;
(原因理解px和dp在手机上面的显示关系)

一像素边框

一像素的边框显示模糊，不精致的问题，网上有众多解决方式，可以百度一下即可

相对单位 rem

em:是根据父节点的font-size为相对单位
rem：是根据html的font-size为相对单位
em在多层嵌套下，变得非常难以控制
rem更加能作为全局统一设置的度量

rem的基值设置多少比较好？
为了适应大手机屏幕 推荐：rem = screen.width/20 (手动计算设置)
还有一点需要注意的是字体font-size不推荐使用rem单位，因为字体的阅读舒服感大小就是那么大，不需要根据屏幕的大小而变化。

多行文本益处。。。

就是在显示多行文字的时候，可能需要在自己期望显示多少行之后，省略后面的文字，然后以。。。的方式显示，具体操作方法网上都有

总结

这是我自己的学习过程，希望大家一起成为一个优秀的工程师，bye！?