| 布局 | 地址 |
|---|---|
| 移动WEB开发之流式布局 | 【HTML+CSS】移动WEB开发之流式布局_ddddddyu的博客-CSDN博客 |
| 移动WEB开发之flex布局 | 【HTML+CSS】移动WEB开发之flex布局_ddddddyu的博客-CSDN博客 |
| 移动WEB开发之rem布局 | 【HTML+CSS】移动WEB开发之rem布局_ddddddyu的博客-CSDN博客 |
| 移动WEB开发之响应式布局 | 【HTML+CSS】移动WEB开发之响应式布局_ddddddyu的博客-CSDN博客 |
1 移动端基础
常见PC端浏览器和移动端浏览器
国内手机浏览器内核基本都是Webkit
移动端主要针对手机端开发
现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一，我们只关注px
2 视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
- 我们只关注理想视口
2.1 布局视口 layout viewport
- 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
- iOS， Android基本都将这个视口分辨率设置为980px ，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
2.2 视觉视口 visual viewport
- 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域
- 我们可以通过缩放去操作视觉视口， 但不会影响布局视口，布局视口仍保持原来的宽度
2.3 理想视口 ideal viewpor
- 简单来说就是网站符合手机屏幕大小，用meta通知浏览器实现
- meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽
2.4 meta视口标签
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
| 属性 | 解释说明 |
|---|---|
| width | 宽度设置的是 viewport 宽度，可以设置 device-width 特殊值 |
| initial-scale | 初始缩放比，大于 0 的数字 |
| maximum-scale | 最大缩放比，大于 0 的数字 |
| minimum-scale | 最小缩放比，大于 0 的数字 |
| user-scalable | 用户是否可以缩放，yes 或 no ( 1或0) |
2.5 标准的viewport设置
- 视口宽度和设备保持一致：width=device-width
- 视口的默认缩放比例 1.0：initial-scale=1.0
- 不允许用户自行缩放：user-scalable=no
- 最大允许的缩放比例 1.0：maximum-scale=1.0
- 最小允许的缩放比例 1.0：minimum-scale=1.0
2.6 小结
- 视口就是浏览器显示页面内容的屏幕区域
- 视口分为布局视口、视觉视口和理想视口
- 我们移动端布局想要的是理想视（就是手机屏幕有多宽，我们的布局视口就有多宽）
- 想要理想视口，我们需要给我们的移动端页面添加meta视口标签
3 二倍图
3.1 物理像素&物理像素比
- 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是商在出厂时就设置好了，比如苹果6\7\8是750*1334
- 我们开发时候的1px不是一定等于1个物理像素的
- PC端页面，1个px等于1个物理像素的,但是移动端就不尽相同
- 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
- PC端和早前的手机屏幕/普通手机屏幕：1CSS像素= 1 物理像素的，物理像素比为 1。而移动端就不尽相同，例如iphone6/7/8的物理像素比为 2。
- Retina (视网膜屏幕)是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率,并提高屏幕显示的细腻程度。
简单来说就是一个px像素装两个物理像素，所以准备的图片px要是原来的两倍才不会模糊
3.2 二倍图
准备的图片比实际大小大 2 倍，这就是二倍图
3.3 二倍图解决方案
- 我们需要一个 50*50 像素（CSS像素）的图片，直接放到 iphone8 里面会放大 2 倍 100* 100 会模糊。
- 我们采取的是 放一个 100*100 图片然后手动的把这个图片缩小为 50* 50（css像素）
- 我们准备的图片比我们实际需要的大小大 2 倍，这就方式就是2倍图
3.4 背景缩放 background-size
background-size属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度；- 单位： 长度|百分比|cover|contain
- cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
- contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
5 移动端技术解决方案
单独制作移动端页面（京东，tb），响应式页面兼容移动端（三星）
移动端浏览器中我们可以放心使用 H5 和 CSS3 样式
同时我们浏览器的私有前缀，只需要考虑加上 webkit 就行
5.1 CSS初始化
移动端初始化推荐使用 normalize.css，官网：Normalize.css: Make browsers render all elements more consistently.https://necolas.github.io/normalize.css/
5.2 CSS3 盒子模型 box-sizing
- 传统盒子模型宽度计算：盒子宽度 = CSS中设置的 width + border + padding
- CSS3 传统盒子模型：盒子宽度 = CSS中设置的 width（包含了border+padding）。
- 也就是说，CSS3盒子模型的padding和border不会再撑大盒子了
/* CSS3盒子模型 */
box-sizing: border-box;
/* 传统盒子模型 */
box-sizing: content-box;
移动端选择CSS3盒子模型
PC端选择传统，不考虑兼容的选择CSS3
5.3 特殊样式
/* CSS3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮需要清除，设置为 transparent 完全透明 */
-webkit-tap-highlight-color: transparent;
/* 在移动端默认外观在ios上加上这个属性才能给按钮和输入框自定义样式 */
-webkit-appearance: none;
/* 禁用长按页面时弹出的菜单 */
img, a {-webkit-touch-callout: none;}
6 移动端常见布局
6.1 单独制作页面
- 流式布局（百分比布局）
- flex 弹性布局（强烈推荐）
- less + rem + 媒体查询布局
- 混合布局
6.2 响应式页面兼容
- 媒体查询
- bootstrap
7 流式布局（百分比布局）
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
- max-width 最大宽度 （max-height 最大高度）
- min-width 最小宽度 （min-height 最小高度）
<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>
二倍图做法
- firework 里面把精灵图等比例缩放为原来的一半
- 之后根据大小测坐标（然后测量x、y坐标）
- 注意代码里
background-size也要写：精灵图原来宽度的一半
background: url(../images/jd-sprites.png) no-repeat -81px 0;
/* 原始图大小为400px左右 */
background-size: 200px auto;