移动web开发

一、屏幕适配问题

解决方案

流式布局

:就是百分比布局，非固定像素，内容像两侧填充，理解成流动的布局，称为流式布局。

viewport视口(主流的适配方案)

       :移动端特有，是一个虚拟的区域，承载网页的。

承载的关系: 浏览器->viewport->网页

  3. 非主流适配(淘宝:目前看已经改为主流，已淘汰)

:根据物理像素放大当前的页面(2或者3倍)

二、移动端常设置盒子的类型为边框盒

box-sizing: border-box;

三、去除/增加高亮

-webkit-tap-highlight-color: transparent;

遇到的问题

2倍背景图失真问题（通过设置背景图片缩小一倍来实现background-size: x/2px y/2px; 对应的获取单个图标元素的时候background-position: x/2 y/2 也要是原来的一半)

图片和文字基线问题

解决办法3种

1. 设置字体大小

body {

    font-size: 0; //明显不合适

}

2. 设置图片的样式

img {

    display: block;

}

3. 设置图片的基准

img {

    vertical-align: middle; // 另外的值也可以

}

附：京东移动端百分比布局

四、移动端触摸事件

touch是移动端的触摸事件，而且是一组事件

touchstart：当手指触摸屏幕的时候触发

touchmove：当手指在屏幕来回的滑动时候触发

touchend：当手指离开屏幕的时候触发

touchcancel：当被迫终止滑动的时候触发（来电，弹消息）

注：利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件

1. touchstart

touchList

触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合，changedTouches 改变后的触摸点集合，targetTouches 当前元素的触发点集合，touches 页面上所有触发点集合

2. touchmove

3. touchend

通过上面的打印可以看到 changedTouches 每个事件都会记录, targetTouches、touches在离开屏幕touchend的时候无法记录触摸点

上面打印的分别是：

clientX clientY 基于浏览器窗口（视口）

pageX pageY 基于页面（视口）

screenX screenY 基于屏幕

4. 模拟手势事件

5. 模拟tap事件

移动端也是有点击事件的，不过延迟了300ms(为了区分是触摸还是点击)，所以可以利用上面的3个事件，计算开始到结束的时间差，如果小于300ms，默认为点击，否则就是滑动事件

五、Bootstrap布局

这里就不做过多的介绍了，详细的可以参考官网。

六、rem布局

1. less认识

1. css预处理语言

2. less无法在浏览器端直接使用，浏览器不识别，必须解析成css代码

3. 通过less解析插件（javascript）

4. 引入less文件需要加上 type="text/less"

5. less.watch(); 无刷新预览样式

6. 以http形式打开网页预览

demo：

...

....

2.rem认识

1. rem是相对单位，大小是基于html元素的字体大小

2. em也是相对单位，但大小是基于父元素的字体大小

⚠️注意：浏览器默认的字体大小是16px

百分比布局不能解决高度自适应的问题，rem布局可以设置高度和宽度都是rem单位，做到宽度和高度都是自适应。

...

...

附：苏宁rem布局

移动端适配-Rem 布局篇

七、现在移动端布局

1. Flex

2. Grid

3. vw、vh、vmin、vmax4个视口单位

vw : 1vw 等于视口宽度的1%

vh : 1vh 等于视口高度的1%

vmin : 选取 vw 和 vh 中最小的那个

vmax : 选取 vw 和 vh 中最大的那个

有兴趣的可以自己去了解，本文旨在记录自己学习移动端开发的记录。