11.移动端注意事项

确定技术选型：方案：单独制作移动页面方案

                        技术：布局采取流式布局

题外知识：制作favicon.ico图标制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net

1.视口（选择理想视口）：设备有多宽，布局视口有多宽

meta视口标签标准设置： <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,
maximum-scale=1.0,minimum-scale=1.0">
<!--user-scalable除此之外，都是以-scale结尾 -->

2.二倍图：我们开发时的1像素，不一定真实的物理像素是1像素，可能是2像素

也就是说 开发1像素=实际2像素 一般开发375px，对应750px开发图

例：50px*50px图片，在iphone8里面显示变大两倍 100px*100px，图片会变模糊

解决方法：准备100px*100px的图片，缩小2倍为50*50的图片，这样图片再扩大2倍，就不会变模糊了。（所以图片要准备两倍图）

3.背景缩放：background-size：图片的宽度 图片的高度；（可以跟百分比，相对于父盒子来说）

background-size：cover（完全覆盖） | contain （使宽高等比例缩放，直到其中一边先接触父盒子）

4.移动端开发选择

               1.单独移动端页面

                2.响应式兼容pc移动端

5.移动端css初始化normalize.css  （https://necolas.github.io/normalize.css/）

6.移动端可以任意使用css3盒子模型：box-sizing：border-box；padding和border不会撑大盒子

7.移动端特殊样式设置：

body {

  box-sizing: border-box;

  -webkit-box-sizing: border-box;

}

/* 禁止长按页面是弹出菜单 */

img,

a {

  -webkit-touch-callout: none;

}

a{

    /* 点击高亮  我们需要清除，设置为transport变成透明 */

  -webkit-tap-highlight-color: transparent;

}

input{

    /* 在移动端浏览器默认的外观ios上加上这个属性，才能给按钮和输入框自定义样式 */

  -webkit-appearance: none;

}

body {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/* 禁止长按页面是弹出菜单 */
img,
a {
  -webkit-touch-callout: none;
}
a{
    /* 点击高亮  我们需要清除，设置为transport变成透明 */
  -webkit-tap-highlight-color: transparent;
}
input{
    /* 在移动端浏览器默认的外观ios上加上这个属性，才能给按钮和输入框自定义样式 */
  -webkit-appearance: none;
}

8.移动端技术选型

单独制作页面：流式布局（百分比布局）|  flex弹性布局（推荐）  |   less+rem+媒体查询布局 |混合布局

响应式页面兼容移动端：媒体查询 | bootstrap

9.流式布局（百分比布局）：非固定像素布局，通过盒子宽度设置成百分比，根据屏幕宽度来进行伸缩，不受像素的限制；

10.图片底侧空白缝隙：在布局一开始就把img {vertical-align:middle}

以下流式布局（百分比布局）初始化css代码

body {
  width: 100%;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  background-color: #fff;
  font-family: -apple-system, Helvetica, sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  background-color: #ccc;
/*css3盒子模型*/
 box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
*{
  /* 点击高亮  我们需要清除，设置为transport变成透明 */
  -webkit-tap-highlight-color: transparent;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  vertical-align: middle;
}
/* 禁止长按页面是弹出菜单 */
img,
a {
  -webkit-touch-callout: none;
}
input{
    /* 在移动端浏览器默认的外观ios上加上这个属性，才能给按钮和输入框自定义样式 */
  -webkit-appearance: none;
/* 去除input输入框默认外边框 */
outline:none;
}

*重点代码*html浏览器端初始化代码

 <!-- 移动端页面初始化 -->
  <meta name="viewport" content="width=device-width,
    initial-scale=1.0,user-scalable=no,
    maximum-scale=1.0,minimum-scale=1.0">
    <!-- seo搜索引擎优化TDK三大标签优化 -->
<meta name="description" content="关键词">
<meta name="keywords" content="搜索关键词">
<title>京东流式布局</title>
  <!-- 引入图标 -->
  <link rel="shortcut icon" href=" /favicon.ico" />
  <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  <link rel="stylesheet" href="css/index.css">

CSDNhttps://mp.csdn.net/mp_blog/creation/editor/12243239011.1 flex 弹性布局知识点

flex弹性布局---css初始样式

body {
  max-width: 540px;
  min-width: 320px;
  margin: 0 auto;
  font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft YaHei",
    STXihei, hei;
  color: #000;
  background-color: #f2f2f2;
  overflow: hidden;
  -webkit-tap-highlight-color: transport;
}
img {
  vertical-align: middle;
}
img,
a {
  -webkit-touch-callout: none;
}
a {
  text-decoration: none;
}
input {
  -webkit-appearance: none;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
* {
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

/* 搜索模块 */
.search-index {
  /* 固定定位跟父级没有关系，它以屏幕为准 */
  position: fixed;
  top: 0;
  /* 让盒子在屏幕中央居中 */
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  /* 固定的盒子宽度应该定死 */
  width: 100%;
  min-width: 320px;
  max-width: 540px;
  height: 44px;
  background-color: pink;
  /* margin: 0 auto; 有定位的盒子不能靠margin去调整盒子位置 */
}

12.移动端事件：

touchstart----mousedown

touchend----mouseup

touchmove----mousemove

e.targetTouches[0] 就可以得到正在触摸DOM元素的第一个手指的相关信息比如手指的坐标等等

以下是移动盒子案例：在touchstart获取初始位置，在touchmove获取移动后的位置

 var box = document.querySelector('.box');
        // 1.手指触摸DOM元素事件
        box.addEventListener('touchstart', function (e) {
            console.log('我触摸了屏幕');//点击一下屏幕 如mousedown
            console.log(e);
        })
        // 2.手指离开DOM元素事件
        box.addEventListener('touchend', function () {
            console.log('我触摸了屏幕end');//离开屏幕 如mouseup
        })
        // 3.手指DOM元素上移动事件
        box.addEventListener('touchmove', function () {
            console.log('我触摸了屏幕滑动');//在屏幕上滑动 如mousemove
        })
        // -----------------touchEvent触摸事件对象------------------------
        // ------1.touches 正在触摸屏幕的所有手指的列表 0 ：touch { }length为有几个手指触摸-----------
        // ------2.targetTouches 正在触摸dom元素的手指列表 0 ：touch { }length为有几个手指触摸-----------
        //如果侦听的是一个DOM元素 他们是一样的
        // ------3.changedTouches 手指状态发生了改变的列表 从无到有 或者 从有到无-----------
        // 一般都是触摸元素，所以经常使用的是targetTouches console.log(e.targetTouches[0]);
        // e.targetTouches[0] 就可以得到正在触摸DOM元素的第一个手指的相关信息比如手指的坐标等等

        // 移动端拖动元素
        var box1 = document.querySelector('.box1');
        // 1. 触摸元素touchstart：获取，同时获得盒子原来的位置
        // 2.移动手指 touchmove：计算手指的滑动距离并移动盒子
        // 3.离开手指 touchend ：
        var startX = 0;//手指初始位置
        var startY = 0;
        var x = 0;//盒子原来的位置
        var y = 0;
        box1.addEventListener('touchstart', function (e) {
            //手指初始位置
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            //盒子原来的位置
            x = this.offsetLeft;
            y = this.offsetTop;
        })
        box1.addEventListener('touchmove', function (e) {
            //计算手指移动距离 手指移动之后的坐标 减去 手指初始的坐标
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            //移动盒子 盒子原来的位置 + 手指移动的距离
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            e.preventDefault();//阻止屏幕滚动的默认行为
        })

13.classList返回元素类名

div.classList.add()

div.classList.remove()

div.classLlist.toggle()

 // 功能：自动播放 手指拖动播放轮播图  携程

        // classList的使用:返回元素类名
        var div = document.querySelector('div');
        console.log(div.classList);//["one", "two", value: "one two"] 伪数组
        console.log(div.classList[0]);//one
        //该属性用于字元素中添加，移除及切换css类
        // 1.添加类： element.classList.add('类名');   是在后面追加类 不会覆盖类 
        div.classList.add('three');//class='one two three'
        // 2.移除类： element.classList.remove('类名');
        div.classList.remove('one');//two three
        // 3.切换类 ： element.classList.toggle('类名');
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            document.body.classList.toggle('bg');//body有这个类就去掉 没有就加上
        })