移动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！?