由于最近要写一个vue项目,同时适配移动端和pc端。考虑到一些功能在移动端和pc端需要使用不同的插件来实现,所以需要进行判断。
export 导出;
在需要判断设备的组件中引入:
本文主要是介绍开发移动端web相册这样一案例用到的前置知识。
移动端更接近手机原生的方式。
移动端demo做成这样的好处:
因为移动端主要的浏览器内核是webkit,所以可以用chrome开发。可以模拟UA和分辨率。
模拟触摸行为,注意touch和click区别。
使用手势操作代替鼠标输入/输出事件
(为兼容IE:PC端用setTimeout定时器,定时修改DOm元素的style属性实现动画)
优势:css3使用设备GUP渲染,动用硬件设备的计算能力做展示,效率高。
PC端:兼容ie,冗余代码,但是计算效率高。
移动端和PC相比:轻 重效率 ,希望在3g网络加载更少的代码,加载更快。
移动端开发框架:jquery mobile , ,简单的还用不到框架,通过组件做复杂应用非常简单。我们做的页面简单,谈不上完整的app效果,用不到复杂应用框架。
执行的时候进入了img的onload事件,说明请求发送成功了,同时图片加载回来了,才会触发Image对象的onload()方法。
可以看看Image标签加载回来的图片都有些什么属性?
通过这种方式加载出来的图片,我们可以获得它的高度,宽度。以及它的自然的宽度和自然的高度。
有了这些信息,可以根据图片大小和当前设备的分辨率动态的调整图片的大小。如果只使用传统的Image标签是没办法做到的。
点击了解css3动画知识。
为什么要有动画事件?当一个动画结束后,我想执行一个操作时怎么办?怎么用js做逻辑控制?此时必须用css3的动画事件。
当一个动画结束的时候,我们可以监听一个元素的animationEnd事件来实现。
做动画时, css3动画框架可以用。
本文作者,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:有问题欢迎与我讨论,共同进步。
想了解rem实现自适应的原理,大家可以自行谷歌,这里就不讲原理了
不懂原理的同学们也没关系,下面跟着操作就可以实现。
下面是以vue项目作为例子
在入口文件main.js中引入
上面的 remUnit: 75, 这里的设置75, 就是设计图是750px, 如果你的设计图是 640px, 那么你改成64即可,如果你的设计图是1920px,那么你改成192即可
找到根目录下.postcssrc.js文件,在里面添加以下代码:
propList 表示匹配的属性 (表示匹配所有属性) 可以在里面用 !border 表示不配备边框,这样不会把边框1px变成1rem
以上配置完后,打开你们的项目编译后的页面,打开调试页面改变宽度就看到了,html的font-size值实时发生改变,和你写的css px值,都自动转成rem了
以上的是全自适应,如果你想控制自适应的范围,比如说,你做pc项目, 想在1300px - 1800px之间做自适应,小于1300px就设置个固定的html font-size值, 大于1800px就设置个固定的html font-size值
这样就可以使得pc项目布局的页面,不至于一直缩小自适应,也不至于一直放大
关键原理是通过媒体查询来控制,代码如下, 在你公共样式(或者全局样式)文件写上
以上只是一个例子, 移动端你就可以不用设置了, pc端,你想在什么范围,根据你的项目页面调就好了