效果图：
浏览器25%下全屏视角，横向、纵向无滚动条，在25%~500%下页面是一样的。
1.大屏适配的要求（普遍）
第一点，横向、纵向不可出现滚动条
第二点，可全屏（就是F11全屏模式）
第三点，不论在多大的屏幕中显示，页面不可变形，最好是肉眼看不出任何问题
2.可用技术
1.强推css3的 scale进行适配，原理其实很简单，就是我们假设按照1920×1080的设计图正常使用px单位去写页面，然后当页面变化时，使用scale动态的放大或者缩小
2.rem适配，没啥好说的，用淘宝的那个即可
3.flex适配
4.百分比适配
3.使用
使用其实很简单，共分三步
第一步， src目录下utils文件下新建drawMixin.js文件，将以下代码粘贴进去
// 屏幕适配 mixin 函数 // * 默认缩放值 const scale = { width: '1', height: '1', } // * 设计稿尺寸（px） const baseWidth = 1920 const baseHeight = 1080 // * 需保持的比例（默认1.77778） const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)) export default { data() { return { // * 定时函数 drawTiming: null } }, mounted () { this.calcRate() window.addEventListener('resize', this.resize) }, beforeDestroy () { window.removeEventListener('resize', this.resize) }, methods: { calcRate () { const appRef = this.$refs["appRef"] if (!appRef) return // 当前宽高比 const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5)) if (appRef) { if (currentRate > baseProportion) { // 表示更宽 scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5) scale.height = (window.innerHeight / baseHeight).toFixed(5) appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` } else { // 表示更高 scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5) scale.width = (window.innerWidth / baseWidth).toFixed(5) appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` } } }, resize () { clearTimeout(this.drawTiming) this.drawTiming = setTimeout(() => { this.calcRate() }, 200) } }, }
第二步，在根组件如app.vue或index.vue文件(页面最外层的标签)写入以下代码
我用的是mixin混入，如果不想这么搞，可以按部就班的把drawMixin.js里面的数据放在该放的位置上即可
<div id="index" ref="appRef"> //加一个ref
import drawMixin from "../utils/drawMixin"
export default { mixins: [drawMixin], data () { return { } }}
第三步，设置根标签的样式
这一步很重要，具体标签名根据自己项目来，就是页面居中，脱离文档流，加一个溢出隐藏，就不会出现滚动条了。
#app { width: 1920px; height: 1080px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: left top; overflow: hidden; }
局限性：
scale非常适合可视化，我想着能不能用于正常的pc端页面呢？我做了几个实验，有rem适配的不适合，用px写的普通项目到也行，可是有一个非常难以解决的问题，那就是滚动条，除了可视化项目，普通的项目可是有滚动条的，将这个方法应用后，直接炸了。
这个PC端页面适配问题一直困扰着我，后续我会写一篇总结文章。
ps：于近期。
