移动端网页基础
移动端
一、移动端背景
1.浏览器
2.手机屏幕
二、视口
1.布局视口layout viewport
2.视觉视口
3.理想视口
4.meta标签
三、物理像素和物理像素比
1.物理像素：分辨率
2.css的px
3.视网膜屏
4.倍图
5.背景图片属性
四、开发选择
五、移动端特殊样式解决
六、移动端常见布局
一、触屏事件
二、事件对象属性
1.event.touches
2.event.targetTouches
3.event.changedTouches
一、移动端背景
1.浏览器
主流浏览器是webkit内核，UC和QQ，百度都是根据webkit内涵修改过来的内核，国内尚无自主研发的内核。
就像国内手机操作系统都是基于安卓修改开发的一样
2.手机屏幕
不关心分辨率，常用px,不需要过度关心单位，
二、视口
视口（viewport）就是浏览器显示页面内容的屏幕区域，视口分为布局视口、视觉视口和理想视口
1.布局视口layout viewport
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
布局视口即网页整体缩小，全部显示在手机上。
2.视觉视口
即用户能看到的网页区域。
可以缩放去操作视觉视口。
.视觉视口即网页不变，手机显示局部，可以滑动显示各个部分
3.理想视口
理想的视口是完整的网页，合适的大小。
需要手动填写meta视口标签通知浏览器操作。
乔布斯发明的创意。
4.meta标签
主要作用是：布局视口的宽度，即网页的宽度应该和设备的宽度保持一致。而不是采取默认的980px宽度。
1.写法
<meta name="viewport" content="width=device-width, //表示网页宽度等于设备的宽度，user-scalable=no, //表示是否运行用户缩放initial-scale=1.0,//最初的缩放倍数，页面一打开的缩放倍数 maximum-scale=1.0, //表示能缩放的最大缩放比 minimum-scale=1.0" //表示能缩放的最小缩放比>
| 属性 | 解释说明 |
|---|---|
| width | 宽度设置的是viewport宽度，可以设置device-width特殊值 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可以缩放，yes或no（1或0） |
三、物理像素和物理像素比
1.物理像素：分辨率
就是手机的实际分辨率 ，不是手机屏幕尺寸，不要搞混。
758*1340分辨率
表示一行的像素点是758个
一列的像素点是1340个
2.css的px
手机端1px不一定等于1物理像素
iphone8上，1px等于2个物理像素，
即iphone8的分辨率是750*1334
那么375px*667px大小的盒子就能完全覆盖住手机屏幕了。
即1px能显示两个物理像素
这个就是物理像素比或屏幕像素比（dpr）
手机分辨率单位 = px * dpr
即标签的大小会乘上dpr才是手机上分辨率的大小
在pc端1px是等于1物理像素的
3.视网膜屏
Retina(视网膜屏幕)是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，
从而达到更高的分辨率，并提高屏幕显示的细腻程度。
4.倍图
比如5050px的图片，放到2dpr的手机上，就会当大2倍，会失真
所以需要准备一个100100px的图片，先手动缩小2倍，然后放大就不会模糊了。
即我们准备的图片要比实际需要的大2倍，这就是倍图。
手动缩小
img{ width:50px; height:50px //这样就能手动缩小100*100的图了}
背景图片也需要手动缩放
backgtound-size:50px 50px;
所以注意在视网膜屏下的开发。
5.背景图片属性
backgtound-size:宽度;//只写一个数代表宽度，高度会等比例缩放backgtound-size:宽度 高度;//值可以是百分百，根据父盒子的大小计算//值为cover：图片会完全覆盖盒子，图片有可能显示不全，图片是等比例拉伸。//值为contain:图片会先满足接触到的一边，然后停止放大。图片会完全显示，但可能不会完全覆盖住盒子。图片是等比例拉伸。
四、开发选择
1.PC端和浏览器端分开制作
2.PC端和移动端混合开发，响应式制作
3.css初始化推荐使用normalize.css
五、移动端特殊样式解决
/*CSS3盒子模型，移动端无兼容性，PC端有兼容性*/box-sizing: border-box;-webkit-box-sizing: border-box;/*点击高亮我们需要清除清除 设置为transparent 完成透明这样点击a链接就没有高亮效果了*/-webkit-tap-highlight-color: transparent;/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/-webkit-appearance: none;/*禁用长按页面时的弹出菜单*/img,a { -webkit-touch-callout: none; }
六、移动端常见布局
链接: 移动端常见布局.
一、触屏事件
touchstart 手指触摸到一个DOM元素时触发
touchmove 手指在一个dom元素上滑动时触发
touchend 手指在一个DOM元素上移开时触发
二、事件对象属性
移动端也有事件对象
1.event.touches
表示几个手指
2.event.targetTouches
正则触摸当前DOM元素上的手指的个数
3.event.changedTouches
手指状态发生了改变的列表
从无到有，
从有到无。