一.视口
视口(viewport) 就是浏览器显示页面内容的屏幕区域。视口可分为布局视口，视觉视口，和理想视口。
1.布局视口：ios android视口分辨率为980px，pc上能显示大多页面，只是元素很小，一般默认可以缩放
2.视觉视口：我们可以缩放来操作视觉视口，但不影响布局视口，布局视口仍保持原来的宽度
3.理想视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
二.二倍图
1.1物理像素，物理像素比
- 我们开发的时候1px不是一定等于1个物理像素的
- pc端页面时，1px等于1个物理像素的，但是移动端不尽相同
- 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
1.2 二倍图
- 我们需要一个50 *50像素的图片 直接放到我们inphone8里面会放大2倍 100 *100就会变模糊
- 我们采取的是放一个100 *100图片 然后手动的把这个图片缩小为50 *50像素的
- 所以我们准备的图片比我们实际需要的大小大2倍，这种方式就是二倍图
1.3 多倍图
不同手机的缩放比例不一样
2.1 背景缩放
- background-size: 背景图片宽度，背景图片高度，如果后面只有一个参数，就是宽度，高度会等比列缩放
- background-size: cover 会把父盒子完全覆盖，可能会有出来的一部分
- background-size: contain 等比例拉伸 当宽度或者高度铺满父盒子，就不会拉伸
移动端技术解决方案
CSS3盒子模型
box-sizing: border-box;//css3盒子模型
padding 和 border不会再撑大盒子
移动端多用CSS3盒子模型
不考虑兼容性问题，就用css3盒子模型
div样式中设置样式{box-sizing:border-box;}
padding border不会撑大盒子 同IE盒模型
a链接在手机端出现点击后链接高亮的问题
解决方案：点击后设置高亮颜色为透明
a{ -webkit-tap-highlight-color:transparent; }
输入框或按钮自定义样式的问题
解决方案：清除默认外观才可以设置自定义样式
input{ -webkit-appearance:none; }
关于不想长按页面某一元素弹出菜单问题
解决方案:
img,a{ -webkit-touch-callout:none; }
移动端常见布局
1.单独制作移动端页面(主流)
- 流式布局
- flex弹性布局
- less + rem + 媒体查询布局
- 混合布局
2.响应式页面兼容移动端(其次)
- 媒体查询
- bootstarp
移动端案例(m.jd.com)
1.技术选型
- 方案：单独制作移动端页面
- 技术：流式布局
2.文件夹
- css
- images(ui图，背景图)
- upload(产品图片)
- index.html(首页)
3.样式
- 引入视口标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- 引入css3样式
①将normalize.css放入css文件夹中，引入css初始化文件
②引入我们首页的css
①<link rel = "stylesheet" href = "css/normalize.css"> ②<link rel = "stylesheet" href = "css/index.css">
4.具体例子
搜索栏做法
左边和右边盒子用定位，中间搜索栏可以不用给宽度，用padding/margine值
导航栏距离上端还有段距离，需要给margine-top: 7px 但是父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷 可以用overflow:hidden 解决外边距塌陷
overflow:hidden的各种作用可以看这篇博客，总结得很好
放大镜二倍精灵图做法
1.在firework里面把精灵图等比例缩放为原来的一半
2.之后根据大小测量坐标
3.注意代码里面background-size也要写成：精灵图原来宽度的一半
超级品牌日做法
大盒子里面宽度设置为100%，三个div小盒子宽度设置为33.33%向左浮动，设置圆角，但是圆角是给div盒子设置的，对图片没有影响，所以我们要设置overflow: hidden把超出的部分隐藏，这样才会显示圆角
图片默认有空白缝隙，取消缝隙，vertical-align: top;
