国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。

总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。

• 移动端设备屏幕尺寸非常多，碎片化严重。

• Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。

• 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。

• 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。

注：作为前端开发，不建议大家去纠结dp，dpi，pt，ppi等单位。

• Chrome DevTools（谷歌浏览器）的模拟手机调试

• 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器

• 使用外网服务器，直接IP或域名访问

• 移动端浏览器我们主要对webkit内核进行兼容

• 我们现在开发的移动端主要针对手机端开发

• 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一

• 学会用谷歌浏览器模拟手机界面以及调试

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

• 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

• iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

• 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

• 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

• 为了使网站在移动端有最理想的浏览和阅读宽度而设定

• 理想视口，对设备来讲，是最理想的视口尺寸

• 需要手动添写meta视口标签通知浏览器操作

• meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">


<!-- 标准的viewport设置 视口宽度和设备保持一致 视口的默认缩放比例1.0 不允许用户自行缩放 最大允许的缩放比例1.0 最小允许的缩放比例1.0 -->

• 对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊

• 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

• 通常使用二倍图， 因为iPhone 6\7\8 的影响,但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求

• 背景图片 注意缩放问题

 /* 在 iphone8 下面 */
 img{ 
        
 /*原始图片100*100px*/
 width: 50px;
 height: 50px;
 } 
.box{ 
        
 /*原始图片100*100px*/
 background-size: 50px 50px;
 }

background-size 属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;

• 单位： 长度|百分比|cover|contain;

• cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

• contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

• 通常情况下，网址域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。
• 京东商城手机版
• 淘宝触屏版

• 苏宁易购手机版

• 三星手机官网：通过判断屏幕宽度来改变样式，以适应不同终端。
• **缺点：**制作麻烦， 需要花很大精力去调兼容性问题

• 移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。

• 我们可以放心使用 H5 标签和 CSS3 样式。

• 同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可

移动端 CSS 初始化推荐使用 normalize.css/

• Normalize.css：保护了有价值的默认值

• Normalize.css：修复了浏览器的bug

• Normalize.css：是模块化的

• Normalize.css：拥有详细的文档

官网地址： http://necolas.github.io/normalize.css/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document ========================================================================== */

/** * 1. Correct the line height in all browsers.修正所有浏览器中的行高 * 2. Prevent adjustments of font size after orientation changes in iOS.防止在iOS中改变方向后调整字体大小。 */

html { 
        
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections ========================================================================== */

/** * Remove the margin in all browsers.在所有浏览器中删除边距。 */

body { 
        
  margin: 0;
}

/** * Render the `main` element consistently in IE.在IE中始终渲染“主”元素。 */

main { 
        
  display: block;
}

/** * Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. 在Chrome, Firefox和Safari中，在“section”和“article”上下文中的“h1”元素的字体大小和空白 */

h1 { 
        
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content ========================================================================== */

/** * 1. Add the correct box sizing in Firefox. 1. 在Firefox中添加正确的框大小。 * 2. Show the overflow in Edge and IE. 2. 在Edge和IE中显示溢出。 */

hr { 
        
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/** * 1. Correct the inheritance and scaling of font size in all browsers.修正所有浏览器中字体大小的继承和缩放。 * 2. Correct the odd `em` font sizing in all browsers. 纠正所有浏览器中奇怪的' em '字体大小。 */

pre { 
        
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics ========================================================================== */

/** * Remove the gray background on active links in IE 10.移除IE 10中活动链接的灰色背景。 */

a { 
        
  background-color: transparent;
}

/** * 1. Remove the bottom border in Chrome 57- 删除底部边界在Chrome浏览器 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.在Chrome、Edge、IE、Opera和Safari中添加正确的文本装饰 */

abbr[title] { 
        
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/** * Add the correct font weight in Chrome, Edge, and Safari.在Chrome、Edge和Safari中添加正确的字体粗细 */

b, label { 
        
  font-weight: bolder;
}

/** * 1. Correct the inheritance and scaling of font size in all browsers.修正所有浏览器中字体大小的继承和缩放。 * 2. Correct the odd `em` font sizing in all browsers.纠正所有浏览器中奇怪的' em '字体大小 */

code, kbd, samp { 
        
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/** * Add the correct font size in all browsers.在所有浏览器中添加正确的字体大小。 */

small { 
        
  font-size: 80%;
}

/** * Prevent `sub` and `sup` elements from affecting the line height in all browsers. *防止' sub '和' sup '元素影响所有浏览器中的行高。 */

sub, sup { 
        
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub { 
        
  bottom: -0.25em;
}

sup { 
        
  top: -0.5em;
}

/* Embedded content ========================================================================== */

/** * Remove the border on images inside links in IE 10.在IE 10中删除链接内图像的边框。 */

img { 
        
  border-style: none;
}

/* Forms ========================================================================== */

/** * 1. Change the font styles in all browsers. 更改所有浏览器中的字体样式。 * 2. Remove the margin in Firefox and Safari. 删除Firefox和Safari中的空白。 */

button, input, optgroup, select, textarea { 
        
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/** * Show the overflow in IE. IE显示溢出。 * 1. Show the overflow in Edge.在边缘显示溢出。 */

button, input { 
         /* 1 */
  overflow: visible;
}

/** * Remove the inheritance of text transform in Edge, Firefox, and IE.在Edge、Firefox和IE中移除文本转换的继承。 * 1. Remove the inheritance of text transform in Firefox.在Firefox中删除文本转换的继承。 */

button, select { 
         /* 1 */
  text-transform: none;
}

/** * Correct the inability to style clickable types in iOS and Safari.修正了在iOS和Safari中无法样式化可点击类型的问题。 */

button, [type="button"], [type="reset"], [type="submit"] { 
        
  -webkit-appearance: button;
}

/** * Remove the inner border and padding in Firefox.删除Firefox中的内边框和填充。 */

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { 
        
  border-style: none;
  padding: 0;
}

/** * Restore the focus styles unset by the previous rule.恢复先前规则未设置的焦点样式。 */

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { 
        
  outline: 1px dotted ButtonText;
}

/** * Correct the padding in Firefox. */

fieldset { 
        
  padding: 0.35em 0.75em 0.625em;
}

/** * 1. Correct the text wrapping in Edge and IE.修正边缘和IE中的文本包装。 * 2. Correct the color inheritance from `fieldset` elements in IE.修正了IE中' fieldset '元素的颜色继承。 * 3. Remove the padding so developers are not caught out when they zero out`fieldset` elements in all browsers. 去掉填充，这样当开发者在所有浏览器中归零“fieldset”元素时就不会被发现。 */

legend { 
        
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/** * Add the correct vertical alignment in Chrome, Firefox, and Opera.在Chrome、Firefox和Opera中添加正确的垂直对齐 */

progress { 
        
  vertical-align: baseline;
}

/** * Remove the default vertical scrollbar in IE 10+.：删除IE 10+中默认的垂直滚动条。 */

textarea { 
        
  overflow: auto;
}

/** * 1. Add the correct box sizing in IE 10.1. 在IE 10中添加正确的框大小。 * 2. Remove the padding in IE 10.2. 移除IE 10中的填充。 */

[type="checkbox"], [type="radio"] { 
        
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/** * Correct the cursor style of increment and decrement buttons in Chrome.修正了Chrome中递增和递减按钮的光标样式。 */

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { 
        
  height: auto;
}

/** * 1. Correct the odd appearance in Chrome and Safari.修正Chrome和Safari中奇怪的外观。 * 2. Correct the outline style in Safari.修正Safari中的轮廓样式 */

[type="search"] { 
        
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/** * Remove the inner padding in Chrome and Safari on macOS.在macOS上移除Chrome和Safari的内填充。 */

[type="search"]::-webkit-search-decoration { 
        
  -webkit-appearance: none;
}

/** * 1. Correct the inability to style clickable types in iOS and Safari.修正了在iOS和Safari中无法样式化可点击类型的问题。 * 2. Change font properties to `inherit` in Safari.在Safari中更改字体属性为“inherit”。 */

::-webkit-file-upload-button { 
        
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive ========================================================================== */

/* * Add the correct display in Edge, IE 10+, and Firefox.在Edge、IE 10+和Firefox中添加正确的显示。 */

details { 
        
  display: block;
}

/* * Add the correct display in all browsers.在所有浏览器中添加正确的显示。 */

summary { 
        
  display: list-item;
}

/* Misc ========================================================================== */

/** * Add the correct display in IE 10+.在ie10 +中添加正确的显示。 */

template { 
        
  display: none;
}

/** * Add the correct display in IE 10.在ie10中添加正确的显示。 */

[hidden] { 
        
  display: none;
}

• 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding

• `CSS3盒子模型： 盒子的宽度 = CSS中设置的宽度width 里面包含了 border 和 padding

  也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了

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

移动端技术选型

• 流式布局（百分比布局）

• flex 弹性布局（强烈推荐）

• less+rem+媒体查询布局

• 混合布局

• 媒体查询
• bootstarp

• 流式布局，就是百分比布局，也称非固定像素布局。

• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

• 流式布局方式是移动web开发使用的比较常见的布局方式

• max-width 最大宽度 （max-height 最大高度）

• min-width 最小宽度 （min-height 最小高度）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { 
           margin: 0; padding: 0; } section { 
           width: 100%; max-width: 980px; min-width: 320px; margin: 0 auto; } section div { 
           /* float: left; */ width: 50%; height: 400px; } section div:nth-child(1) { 
           background-color: pink; } section div:nth-child(2) { 
           background-color: purple; } </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

</html>

• 方案：我们采取单独制作移动页面方案

• 技术：布局采取流式布局

3.设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <link rel="stylesheet" href="css/normalize.css">
 <link rel="stylesheet" href="css/index.css">

body { 
        
    margin: 0 auto;
    min-width: 320px;
    max-width: 640px;
    background: #fff;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
    color: #666;
}

/*点击高亮我们需要清除清除 设置为transparent 完成透明*/

* { 
        
    -webkit-tap-highlight-color: transparent;
}


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

input { 
        
    -webkit-appearance: none;
}


/*禁用长按页面时的弹出菜单*/

img, a { 
        
    -webkit-touch-callout: none;
}

a { 
        
    color: #666;
    text-decoration: none;
}

ul { 
        
    margin: 0;
    padding: 0;
    list-style: none;
}

img { 
        
    vertical-align: middle;
}

div { 
        
    /* css3 盒子模型 */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.clearfix:after { 
        
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}

项目下载

传统布局

• 兼容性好

• 布局繁琐

• 局限性，不能再移动端很好的布局

flex 弹性布局

• 操作方便，布局极为简单，移动端应用很广泛

• PC 端浏览器支持情况较差

• IE 11或更低版本，不支持或仅部分支持

建议：

1. 如果是PC端页面布局，我们还是传统布局。

2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局