一、屏幕适配问题
解决方案
-
流式布局
:就是百分比布局，非固定像素，内容像两侧填充，理解成流动的布局，称为流式布局。
-
viewport视口(主流的适配方案)
:移动端特有，是一个虚拟的区域，承载网页的。
<meta name="viewport" content="width=device-width,initial-scale=1,maximun-scale=1,minimum-scale=1,user-scalable=0" />
承载的关系: 浏览器->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
触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合，changedTouches 改变后的触摸点集合，targetTouches 当前元素的触发点集合，touches 页面上所有触发点集合
2. touchmove
3. touchend
通过上面的打印可以看到 changedTouches 每个事件都会记录, targetTouches、touches 在离开屏幕touchend的时候无法记录触摸点
上面打印的分别是：
clientX clientY 基于浏览器窗口（视口）
pageX pageY 基于页面（视口）
screenX screenY 基于屏幕
4. 模拟手势事件
<script type="text/javascript">
function isSlider(dom, leftFunc, rightFunc)
{
let isMove = false;
let start = 0;
let distance = 0;
dom.addEventListener('touchstart', function (e) {
start = e.touches[0].clientX;
}, false);
dom.addEventListener('touchmove', function (e) {
distance = e.touches[0].clientX - start;
isMove = true;
}, false);
dom.addEventListener('touchend', function (e) {
if (isMove && Math.abs(distance) >= 50) {
if (distance > 0) {
rightFunc && rightFunc.call(this, e);
} else {
leftFunc && leftFunc.call(this, e);
}
}
isMove = false;
start = 0;
distance = 0;
}, false);
}
let divDom = document.querySelector('.box');
function left(e)
{
console.log('move left');
console.log(e);
}
function right(e)
{
console.log('move right');
console.log(e);
}
isSlider(divDom, left, right);
</script>
5. 模拟tap事件
移动端也是有点击事件的，不过延迟了300ms(为了区分是触摸还是点击)，所以可以利用上面的3个事件，计算开始到结束的时间差，如果小于300ms，默认为点击，否则就是滑动事件
<script type="text/javascript">
// 不加viewport标签，可以看到双底放大的效果，很明星！！！双击可以测试！！！
let tapFunc = function(dom, callback) {
let isMove = false;
let diffTime = 0;
let start = 0;
dom.addEventListener('touchstart', function (e) {
start = Date.now();
});
dom.addEventListener('touchmove', function (e) {
isMove = true
diffTime = Date.now() - start;
});
dom.addEventListener('touchend', function (e) {
if (!isMove && diffTime < 150) {
callback && callback.call(this, e);
}
});
}
tapFunc(document.querySelector('.box'), function (e) {
console.log(e)
console.log('tap')
});
</script>
五、Bootstrap布局
这里就不做过多的介绍了，详细的可以参考官网。
六、rem布局
1. less认识
1\. css预处理语言
2\. less无法在浏览器端直接使用，浏览器不识别，必须解析成css代码
3\. 通过less解析插件（javascript）
4\. 引入less文件需要加上 type="text/less"
5\. less.watch(); 无刷新预览样式
6\. 以http形式打开网页预览
demo：
...
<!--书写less样式的代码-->
<link rel="stylesheet" type="text/less" href="../less/test.less">
<script src="../lib/less/less.min.js"></script>
<script>less.watch();</script>
....
2.rem认识
1\. rem是相对单位，大小是基于html元素的字体大小
2\. em也是相对单位，但大小是基于父元素的字体大小
⚠️注意：浏览器默认的字体大小是16px
百分比布局不能解决高度自适应的问题，rem布局可以设置高度和宽度都是rem单位，做到宽度和高度都是自适应。
...
<style>
/*假设的设备 320px 414px 640px */
@media (min-width: 320px) {
html{
font-size: 50px;
}
}
@media (min-width: 414px) {
html{
font-size: 64.6875px;
}
}
@media (min-width: 640px) {
html{
font-size: 100px;
}
}
body{
margin: 0;
padding: 0;
font-size: 14px;
}
/*流式容器*/
header{
width: 100%;
height: 1rem;
line-height: 1rem;
font-size: 0.32rem;
text-align: center;
background: green;
color: #fff;
}
</style>
...
<!--1.伸缩布局 flex -->
<!--2.流式布局 百分比 -->
<!--3.响应布局 媒体查询 （超小屏设备的时候：流式布局）-->
<!--共同点：元素只能做宽度的适配（排除图片）-->
<!--适配方案rem：宽度和高度都能做到适配（等比缩放）-->
<!--4.rem布局-->
<!--通过控制html上的字体大小去控制页面上所有已rem为单位的基准值控制尺寸-->
<!--4.1 把页面上px单位转换成rem单位-->
<!--4.2 页面制作的时候 psd 上的量取的px转成rem使用-->
<!--4.3 怎么换算？？？预设一个基准值 方便计算 100px -->
<!--4.4 适配的时候设置基准值 320px 50px 怎么算：（640px 100px ===320px 50px）-->
<!--4.5 换算公式：当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度 -->
<!--4.6 怎么去改变 （js换算，媒体查询推荐）-->
附：苏宁rem布局
移动端适配-Rem 布局篇
七、现在移动端布局
1. Flex
2. Grid
3. vw、vh、vmin、vmax4个视口单位
- vw : 1vw 等于视口宽度的1%
- vh : 1vh 等于视口高度的1%
- vmin : 选取 vw 和 vh 中最小的那个
- vmax : 选取 vw 和 vh 中最大的那个
有兴趣的可以自己去了解，本文旨在记录自己学习移动端开发的记录。