1. 移动端基础
1.1 浏览器现状
1.2 手机屏幕现状
1.3 常见移动端屏幕尺寸
1.4 移动端调试方法
· Chrome DevTools（谷歌浏览器）的模拟手机调试
· 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
· 使用外网服务器，直接IP或者域名访问
1.5 总结
· 移动端浏览器我们主要对webkit内核进行兼容
· 我们现在开发的移动端主要针对手机端开发
· 现在移动端碎片化严重，分辨率和屏幕尺寸大小不一
· 学会用谷歌浏览器模拟手机界面以及调试
2. 视口
视口（viewport）就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。
2.1 布局视口 layout viewport
· 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
· IOS、Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
2.2 视觉视口 visual viewport
· 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域
· 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度
2.3 理想窗口 ideal viewport
· 为了使网站在移动端有最理想的浏览和阅读宽度二设定
· 理想视口，对设备来讲，是最理想的视口尺寸
· 需要手动添加meta视口标签通知浏览器操作
· meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们的布局视口就有多宽
2.4 总结
2.5 meta视口标签
2.6 标准的viewport设置
· 视口宽度和设备保持一致
· 视口的默认缩放比例1.0
· 不允许用户自行缩放
· 最大允许缩放比例1.0
· 最小允许缩放比例1.0
3. 二倍图
3.1 物理像素&物理像素比
· 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好的，比如苹果6/7/8，是750*1334
· 我们开发的时候1px不是一定等于1个物力像素
· PC端页面，1个px等于1个物理像素，但是移动端就不尽相同
· 一个px的能显示的物理像素点的个数，称为物理像素比或者屏幕像素比
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: pink;
}
/* 1.物理像素就是分辨率，iPhone8的物理像素是750 */
/* 2.在iphone8里面，1px开发像素=2个物理像素 */
- PC端和早期的手机屏幕/普通手机屏幕：1CSS像素=1物理像素
- Retina（视网膜屏幕）是一种显示技术，可以把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。
3.2 多倍图
- 对于一张50px*50px的图片，在手机Retina屏幕中打开，按照刚才的像素比会放大倍数，这样会造成图片模糊
- 在标准的viewport中设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
- 通常使用二倍图，因为iPhone6\7\8的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发需求
- 背景图片注意缩放问题
<style>
/* 我们需要一个50*50像素（css像素）的图片，直接放到我们的iPhone8里面会放大2倍，
100*100就会模糊 */
/* 我们采取的是一个100*100的图片，然后手动把这个图片缩小为50*50（css像素） */
/* 我们准备的图片比我们实际需要的大小大2倍，这种方式就叫2倍图 */
img:nth-child(2) {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<!-- 模糊的 -->
<img src="images/apple50(1).jpg" alt="">
<!-- 2倍图 -->
<img src="images/apple100.jpg" alt="">
</body>
3.3 背景缩放background-size
background-size属性规定背景图像的尺寸
- 单位：长度|百分比|cover|contain
- cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
- contain把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
<style>
div {
width: 500px;
height: 500px;
border: 2px solid red;
background: url(images/dog.jpg) no-repeat;
/* background-size: 图片的宽度 图片的高度 */
/* background-size: 500px 200px; */
/* 2.只写一个参数，肯定是宽度，高度忽略了，会等比例缩放 */
/* background-size: 500px; */
/* 2.里面的单位可以跟%，相对于父盒子的大小 */
/* background-size: 50%; */
/* 3.cover要完全覆盖div盒子，可能有部分背景图片显示不全 */
/* background-size: cover; */
/* 4.contain高度和宽度等比例拉升，当宽度或高度铺满div盒子就不再进行拉伸，
可能有部分空白区域 */
background-size: contain;
}
</style>
3.4 多倍图切图cutterman
- @3X 3倍图
- @2X 2倍图
- @1X 1倍图原图
4. 移动端开发选择
4.1 移动端主流方案
- 单独制作移动端页面（主流）
- 响应式页面兼容移动端（其次）
4.2 单独移动端页面（主流）
通常情况下，网址域名前面加m（mobile）可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面
4.3 响应式兼容PC移动端
三星电子官网：www.samsung.com/cn/，通过判断屏幕宽度来改变样式，以适应不同终端。
缺点： 制作麻烦，需要花很大精力去调兼容性问题。
4.4 总结
现在市场常见的移动端开发有单独制作移动端页面和响应式页面两种方案。
现在市场主流的选择还是单独制作移动端页面
5. 移动端技术解决方案
5.1 移动端浏览器
移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。
我们可以放心使用H5标签和CSS3样式
同时我们浏览器的私有前缀我们只需要考虑添加webkit即可。
5.2 CSS初始化 normalize.css
移动端CSS初始化推荐使用normalize.css
- Normalize.css：保护了有价值的默认值
- Normalize.css：修复了浏览器的bug
- Normalize.css：是模块化的
- Normalize.css：拥有详细的文档
5.3 CSS3盒子模型box-sizing
- 传统模式计算：盒子的宽度=CSS中设置的width+border+padding
- CSS3盒子模型：盒子的宽度=CSS中设置的宽度width里面包含了border和padding，也就是说，我们的CSS3中的盒子模型，padding和border不会撑大盒子
传统orCSS3盒子模型？
- 移动端可以全部CSS3盒子模型
- PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择CSS3盒子模型
5.4 特殊样式
6. 移动端常见布局
移动端技术选型
移动端布局和以前我们学习PC端有所区别：
单独制作移动端页面（主流）
- 流失布局（百分比布局）
- flex弹性布局（强烈推荐）
- less+rem+媒体查询布局
- 混合布局
响应式页面兼容移动端（其次）
- 媒体查询
- bootstarp
6.1 流式布局（百分比布局）
- 流式布局，就是百分比布局，也称为非固定像素布局
- 通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充
- 流式布局方式是移动web开发使用的比较常见的布局方式
- max-width最大宽度（max-height最大高度）
- min-width最小宽度（min-height最小高度）
<style>
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
max-width: 980px;
min-width: 500px;
margin: 0 auto;
}
section div {
float: left;
width: 50%;
height: 400px;
}
div:nth-child(1) {
background-color: pink;
}
div:nth-child(2) {
background-color: purple;
}
</style>
6.2 二倍精灵图做法
- 在firework里面把精灵图等比例缩放为原来的一半
- 之后根据大小测量坐标
- 注意代码里面background-size也要写：精灵图原来宽度的一半
6.3 图片格式
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
