开发移动端页面必须要懂的几点

设备像素(物理像素)和CSS像素(逻辑像素) 设备像素 设备像素指的就是设备常说的分辨率。如iPhone6分辨率为750*1334,则iPhone的屏幕横向共有750个物理像素,纵向共有1334个像素。设备的物理像素是不会变的。 CSS像素 CSS像素是独立于设备的逻辑像素,前端布局所用的像素就是指的CSS像素。一个CSS像素在屏幕上所占的位置大小不是固定的,和屏幕的缩放有关。 设备像素比(device pixel ratio) DPR在缩放比例为1的情况下: 设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数 例如iPhone6的DPR为2, 其分辨率为750*1334, 理想视口为375*667. 移动端的三个视口 在PC浏览器中,视口只有一个,

流动图书馆微信小程序

流动图书馆 流动图书馆是一个图书漂流和借阅工具,旨在共享闲置图书,并链接趣味相投的小伙伴。 预览 链接 技术栈 小程序MINA框架: 一个响应的数据绑定框架。分为两块视图层(View)和逻辑层(App Service) Flex:flex弹性布局 Express : http服务框架 websocket: 前后端消息的实时推送 mongoose: 操作mongodb数据库 pm2: 服务端使用pm2部署,常驻进程 截图 首页 借阅书架 发布的图书 借阅的图书 客户端 代码结构 微信小程序中每个页面会有四个文件

JavaScript事件解析

事件: 事件三要素: 事件源 :即dom元素或者其他对象 事件类型:事件的类型 事件监听程序 : 事件的回调函数 注册事件处理程序 1.通过设置事件目标的属性 ele.onclick = function(e){}; 注意:这种写法如有多个处理程序则会覆盖掉之前的 2.通过元素的addEventListener ele.addEventListener('click' , function(e){console.log(e.target);}); //相同的参数多次调用只注册一次 ele.removeEventListener('click',func)

客户端JS的时间线和load事件

JS的时间线 JS程序分两阶段 脚本执行阶段 —— 事件处理阶段 web浏览器创建Document对象,并开始解析Web页面,解析HTML元素和它们的文本内容后添加ELement对象和Text节点到文档中。在这个阶段document.readyState属性的值是"loding" 当HTML解析器遇到没有async和defer属性的<script>元素时,它把这些元素添加到文档中,然后执行行内和外部脚本。这些脚本会同步执行,并且在脚本下载(如果需要)和执行时解析器会暂停。这样脚本就可以用document.write()来把文本插入到输入流中。解析器恢复时这些文本会成为文档的一部分。同步脚步经常简单定义函数和注册后面使用的注册事件处理程序,但它们可以遍历和操作文档树,因为在它们执行时已经存在了。这样,同步脚本可以看到它自己<