CSS学习第十篇
- [1. 移动Web开发流式布局导读](#1. 移动Web开发流式布局导读)
- [2. 移动端基础](#2. 移动端基础)
- [3. 视口](#3. 视口)
-
- [3.1 视口介绍](#3.1 视口介绍)
- [3.2 meta视口标签](#3.2 meta视口标签)
- [4. 二倍图](#4. 二倍图)
-
- [4.1 物理像素与物理像素比](#4.1 物理像素与物理像素比)
- [4.2 二倍图介绍](#4.2 二倍图介绍)
- [4.3 背景缩放background-size](#4.3 背景缩放background-size)
- [4.4 背景二倍图以及多倍图切图](#4.4 背景二倍图以及多倍图切图)
- [5. 移动端开发选择](#5. 移动端开发选择)
- [6. 移动端技术解决方案](#6. 移动端技术解决方案)
- [7. 移动端特殊样式](#7. 移动端特殊样式)
- [8. 移动端技术选型](#8. 移动端技术选型)
- [9. 移动端常见布局---流式布局](#9. 移动端常见布局—流式布局)
1. 移动Web开发流式布局导读
目标：
目录
2. 移动端基础
浏览器现状：
只处理-webkit-前缀就够兼容全部主流手机浏览器。
手机屏幕现状：
常见移动端屏幕尺寸：
移动端调试方法：
总结：
3. 视口
3.1 视口介绍
我们要学理想视口：
（1）布局视口即网页本身的宽度，必须手动放大
效果图：
（2）视觉视口：手机多大，视觉视口就有多大；
放大/缩小网页，视觉视口变小/变大。
例如：放大网页，屏幕大小不变，但是内容少了，这就是视觉视口变小了。
效果图：
（3）理想视口
总结：
3.2 meta视口标签
视口标签
标准的viewport设置
4. 二倍图
4.1 物理像素与物理像素比
物理像素和物理像素比
4.2 二倍图介绍
视网膜屏幕
但是压缩像素，手机可能会使图片模糊
解决方案如下：准备二倍图！
效果图
除了二倍图，还有多倍图
4.3 背景缩放background-size
背景缩放background-size：
（1）原图
效果：
（2）长度
只写一个参数
（3）百分比
（4）cover
（5）contain
与cover的区别是，contain只覆盖一个维度
4.4 背景二倍图以及多倍图切图
切图
缩放后才会显示完整图片（清晰）
但是准备图的时候，有时候需要2倍图，有时候需要3倍图，那我如何去切图呢？ →用cutterman
5. 移动端开发选择
移动端主流方案：
单独的有早年淘宝、传统企业官网，响应式的有知乎官网、菜鸟教程等教程网站
接下来，我们来看各自的不同之处。
（1）单独移动端页面：根据设备的不同，来显示不同的页面。
（2）响应式兼容PC移动端：通过判断屏幕宽度来改变样式以适应不同终端
6. 移动端技术解决方案
webkit内核（考虑兼容性）
移动端样式初始化
CSS3有了新的盒子模型
实操：
7. 移动端特殊样式
特殊样式：
8. 移动端技术选型
选方案：
9. 移动端常见布局---流式布局
流式布局
（要使盒子在合理的范围之内，还会设置最大值和最小值）
实操：
