移动端开发

移动端开发与pc端开发的区别

移动端开发

视口问题

视口是移动设备上用来显示网页的区域，一般比移动设备可视区域大，宽度可能是980px 或者 1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端视口的大小，这样会让页面不容易观看，可以用meta标签，name = “viewport”，来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。

视口的相关设置

一般都要加一个meta标签,然后在标签里面添加属性
content 视口的相关设置
width 视口的宽度，值为一个正整数或字符串device-width(设备实际宽度-css像素)，不建议设置数字（安卓有些设备不支持）
height
user-scalable : 是否允许缩放 默认值是允许缩放 值为yes或no
initial-scale : 页面初始缩放值，值是一个数字可以带小数点
minimum : 页面最小能够缩放的比例，值是一个数字可以带小数点
maximum : 页面最大能够缩放的比例，值是一个数字可以带小数点
​
width=device-width,
user-scalable=no,不允许缩放
initial-scale=1.0,缩放比例
minimum-scale=1.0,最小缩放比例
minimum-scale=1.0最大缩放比例

区别
1.pc端考虑的是浏览器的兼容,和移动端是考虑更多的是手机兼容
2. 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。
3. 一般pc端用jquery，移动端用zepto
还有等等一些区别

移动端的布局常用的几种

1. 移动端常见布局 移动端单独制作(自适应网站)

    流式布局（百分比）
    flex 弹性布局
    less + rem + 媒体查询
    混合布局    响应式网站
    媒体查询
    bootstrap
   

移动端技术的解决方案

1.移动端浏览器兼容问题
2.移动端的公共样式

移动端的适配问题

适配
定义：在不同尺寸的手机设备上，页面是相对性的到达合理的展示（自适应）或者保持统一效果的等比缩放
适配的元素：
1.字体
2.宽高
3.间距
4.图像（图标、图片）
适配的方法：
1.百分比适配：根据父级算百分比，需配合其他布局实用
2.viewport适配：把所有机型的css像素设置成一致的
1.viewport需要通过js动态设置
2.通过设置比例（初始比例以及缩放比例），把宽度设置成一致
公式： 缩放比 = css像素 / 目标像素
3.rem适配
概念：
em : 作为font-size的单位时，代表父元素的字体大小，作为其他属性单位时，代表自身的字体大小
rem : root:根 css3新增的一个相对单位，相对于根元素的字体大小
注意：chrom浏览器有最小字体限制必须为12px

rem适配方案
1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
技术方案：
1.rem+媒体查询
②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
③每一份作为html字体大小，这里就是25px
④那么在320px设备的时候，字体大小为320/15就是 21.33px
⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
⑥比如我们以750为标准设计稿
⑦一个100100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1
⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1
⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
总结：
①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
②屏幕宽度/划分的份数就是 htmlfont-size 的大小
③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小
2 flexible.js+rem
手机淘宝团队出的简洁高效移动端适配库，我们不需要写不同屏幕的媒体查询，因为里面js做了处理。
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
我们要做的，就是确定好我们当前设备的html 文字大小就可以了。
比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以。
页面元素rem值： 页面元素的px 值 / 75 ，剩余的让flexible.js来去算
github地址：https://github.com/amfe/lib-flexible
总结：
因为flexible是默认将屏幕分为10等分，但是当屏幕大于750的时候希望不要再去重置html字体了；
所以要自己通过媒体查询设置一下，并且要把权重提到最高