目录：1、视口 2、二倍图 3、移动端开发选择 4、移动端技术解决方案
1、视口
1.1 视口
- 定义：视口就是浏览器显示页面内容的屏幕区域
- 视口分为：布局视口、视觉视口和理想视口
- 布局视口(layout viewport)：
image.png- 视觉视口(visual viewport)：
image.png- 理想视口(ideal viewport)：
1、为了使网站在移动端有最理想的浏览和阅读宽度而设定
2、需要手动添加meta视口标签通知浏览器操作
3 、meta视口标签的主要目的是：设备有多宽，我们的布局视口就有多宽。
1.2、meta视口标签
| 属性 | 解释说明 |
|---|---|
| width | 宽度设置是viewport宽度，可以设置device-width特殊值； width=device-width就是视口宽度=设备宽度 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可以缩放，yes或no （1或0） |
- 标准的viewport设置：
- 视图宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
如下：
content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0, minimum-scale=1.0"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 这是 新建html文件时，自己产生的meta标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2、二倍图
一些图标，背景图 在移动端的 问题 我们会拿到2或几倍的图，我们需要适当的缩小后放入盒子中；这样会更加的清晰。
3、移动端开发选择
1、主流 单独移动端页面
通常在网址域名前面加m（mobile）可以打开移动端。
通过判断设备，如果是移动端打开，则会跳到移动端页面。
2、响应式
兼容PC移动端，通过判断屏幕宽度来改变样式，以适应不同终端
4、移动端技术解决方案
1、移动端浏览器
image.png2、CSS初始化 normalize.css
官网 http://necolas.github.io/normalize.css/
3、CSS3
注意：
- 移动端可以全部使用CSS3 的盒子模型。
- PC端如果完全需要兼容，会使用传统模型，如果不考虑兼容 也可以使用CSS3模型
//padding margin 不会再撑大盒子 box-sizing: border-box; //这个是会撑大盒子，就是传统盒子 box-sizing: content-box;特殊样式
- 1、上述的CSS3盒子模型
box-sizing: border-box; -webkit-box-sizing:border-box;
- 2、点击高亮我们需要清除 设置为transparent 完全透明
在移动端点击这个标签的时候，背景会高亮：
<a href="#">这是一个a标签</a> a{ -webkit-tap-highlight-color: transparent; }image.png
- 3、在移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式
-webkit-appearance:none;
- 4、禁用长按页面时的弹出菜单 在真机时才会看到
-webkit-touch-callout: none;
