js 控制图片在移动端和PC端的显示？

点击联系发帖人 时间：2022-10-05 20:18

pc端游戏

由于最近要写一个vue项目，同时适配移动端和pc端。考虑到一些功能在移动端和pc端需要使用不同的插件来实现，所以需要进行判断。

export 导出；
在需要判断设备的组件中引入：

//假如是移动端，进行一些操作

}

本文主要是介绍开发移动端web相册这样一案例用到的前置知识。

移动端更接近手机原生的方式。

移动端demo做成这样的好处：

在手机端浏览器中打开，接近原生app应用。

因为移动端主要的浏览器内核是webkit，所以可以用chrome开发。可以模拟UA和分辨率。

模拟触摸行为，注意touch和click区别。

使用手势操作代替鼠标输入/输出事件

（为兼容IE:PC端用setTimeout定时器，定时修改DOm元素的style属性实现动画）

优势：css3使用设备GUP渲染，动用硬件设备的计算能力做展示，效率高。

1、移动端开发框架和PC端对比

PC端：兼容ie，冗余代码，但是计算效率高。

移动端和PC相比：轻重效率，希望在3g网络加载更少的代码，加载更快。

移动端开发框架：jquery mobile , ,简单的还用不到框架，通过组件做复杂应用非常简单。我们做的页面简单，谈不上完整的app效果，用不到复杂应用框架。

执行的时候进入了img的onload事件，说明请求发送成功了，同时图片加载回来了，才会触发Image对象的onload()方法。

可以看看Image标签加载回来的图片都有些什么属性？

通过这种方式加载出来的图片，我们可以获得它的高度，宽度。以及它的自然的宽度和自然的高度。

有了这些信息，可以根据图片大小和当前设备的分辨率动态的调整图片的大小。如果只使用传统的Image标签是没办法做到的。

点击了解css3动画知识。

为什么要有动画事件？当一个动画结束后，我想执行一个操作时怎么办？怎么用js做逻辑控制？此时必须用css3的动画事件。

当一个动画结束的时候，我们可以监听一个元素的animationEnd事件来实现。

做动画时， css3动画框架可以用。

本文作者,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。

}

pc端自适应（在一定屏幕范围内）

想了解rem实现自适应的原理，大家可以自行谷歌，这里就不讲原理了

不懂原理的同学们也没关系，下面跟着操作就可以实现。

下面是以vue项目作为例子

在入口文件main.js中引入

如果是vue-cli3构建的项目，那么在根目录找到vue.config.js文件，（没有找到的话，就新建一个）

上面的 remUnit: 75, 这里的设置75，就是设计图是750px，如果你的设计图是 640px, 那么你改成64即可，如果你的设计图是1920px，那么你改成192即可

找到根目录下.postcssrc.js文件，在里面添加以下代码：

propList 表示匹配的属性 (表示匹配所有属性) 可以在里面用 !border 表示不配备边框，这样不会把边框1px变成1rem

在css中不想px转rem可以这样, 在样式后面写/no/注释即可

以上配置完后，打开你们的项目编译后的页面，打开调试页面改变宽度就看到了，html的font-size值实时发生改变，和你写的css px值，都自动转成rem了

第五步，pc端做自适应解决方案

以上的是全自适应，如果你想控制自适应的范围，比如说，你做pc项目，想在1300px - 1800px之间做自适应，小于1300px就设置个固定的html font-size值，大于1800px就设置个固定的html font-size值

这样就可以使得pc项目布局的页面，不至于一直缩小自适应，也不至于一直放大

关键原理是通过媒体查询来控制，代码如下, 在你公共样式（或者全局样式）文件写上

以上只是一个例子，移动端你就可以不用设置了， pc端，你想在什么范围，根据你的项目页面调就好了

}

久游无息网