关于web端页面如何快速适配移动端

如图，web端的效果：

现在要改成移动端页面也要有一样的效果，但网页宽度、高度、定位写死了，移动端的屏幕大小不同，导致出现问题：

开发用的是vue。
有什么办法能够让页面随屏幕大小自动缩放？

媒体查询 宽度小于750 就 再走另一套样式 缩小点

需要写三套css代码，一套是pc，一套是ipad，一套是mobile，然后获取当前屏幕宽度，去设置样式

var clientWidth = client().width; // client是一个假设你已经实现了一个获取屏幕宽度的函数（包括用户缩小放大页面）
//判断屏幕宽度，加载不用的样式
if (clientWidth > 980) {
    styleCss.href = "css/pc.css";
} else if (clientWidth > 640) {
    styleCss.href = "css/pad.css";
} else {
    styleCss.href = "css/mobile.css";
}

利用媒体查询，搭配easy less插件，再搭一个过渡js脚本就行了