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

                        技术：布局采取流式布局

题外知识：制作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">