响应式开发
- 根据设备的宽度，自动调整页面的大小，从而在各个设备上呈现出最佳的视觉效果
响应式开发种类
响应式开发技术
- 视口viewport
- 媒体查询（可以识别设别的特征，从而调整页面的布局）
- 布局时使用相对单位（rem，%，em）
- fix布局
- 图片处理（max-width/min-width)
视口
- 概念抽象 设置简单
- PC端页面和移动端页面最大差别，设备的宽度不一样
- 默认移动端设别页面按980宽度渲染，这个宽度还是比移动设备宽度大，为了防止滚动条的出现早期各个设备会做个缩放处理，缩放的比例就等于设备的宽度除以980，这样处理后，文字图片都非常模糊看不清
- 所以 需要改造渲染的宽度（布局视口的宽度），改成设备宽度渲染，这样页面也不会缩放
meta:vp+TAB键 设置视口
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
复制代码
width=device-width 布局视口 = 设备宽度user-scalable 是否允许缩放页面 通常为noinitial-scale=1.0 初始缩放值maximum-scale 最大缩放比例minimum-scale 最小缩放比例
媒体查询
@media all|screen|print and (媒体条件){
div{
css样式
}
}
复制代码
- 一般公司会给你两套图，1000和480宽度的设计稿，这两个宽度就是媒体查询设置的两个主断点 自己还会设置次断点
@media all and(max-width:1000px){
}
@media all and(max-width:480px){
}
复制代码
移动适配
- 大型项目：PC一套（固定布局），移动端一套（移动适配）
- 设备像素比：DPR
- DPR:1.0,2.0,3.0等等
- 例：iPhone6：7501334 物理像素 375667 CSS像素
- DPR = 物理像素/CSS像素
- 根据设计稿在各个移动设备上呈现的效果是一样的，但是由于设备的宽度各不一样，图片的尺寸，文字的大小，内容的间距等会发生相应的改变，布局是一样的
- 图片和文字大小根据设备的狂赌缩放，不能用固定的单位px，而是用相对单位rem，rem是相对于根元素（html）字体大小
- 通过媒体查询更改根元素字体大小会有如下问题：1.设置的是设备宽度的范围，不精准；2.根元素字体大小设置多少合适，不好设置
- 应该根据设备宽度从而设置各个设备的根元素字体大小
- 元素的尺寸设置多少rem合适
- 设备宽度/根元素字体大小 = 设计稿宽度（750）/100
//click 有300ms的延迟 等看你会不会再按一下或长按
//fastclick 解决click延迟问题
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
//调用之后还是正常使用click事件，但是在移动端页面不会再有延迟问题
document.body.onclick = function () {}
复制代码
- 移动端触摸事件：单指事件：
touchstart（按下时触发），touchmove（移动时触发），touchend（手指离开屏幕时触发），touchcancle（手机发生意外时触发）
e.touches;//触摸点集合
e.touches[0];//第一个触摸点信息
复制代码
转载于:https://juejin.im/post/5bca98fd6fb9a05cf90868ca
扫一扫
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
