背景：我做的是一个现场活动的游戏页面，对前端适配要求比较高。我选择js框架是vue,ui框架是element-ui。当初我就想做个最小宽度1200然后再结合媒体查询一起使用。然而发现写的代码太多了感觉css控制特别麻烦。而且现场活动的电脑屏幕尺寸还特别的千奇百怪没办法只能重新想方法。
我第一次尝试的写法是：首先一屏显示，获取当前页面的窗口的高度，显示区的部分全用设计稿的百分比控制。感觉写了太多的css还达不到想要的结果
突然想到 tansform:scale缩放，适配有很多方法这只是我认为适合我们自己的业务。首先我不用写很多的适配css进行控制。gud
显示区固定尺寸的设计稿 动态获取当前视图区的页面高度和宽度。此时显示区域的缩放比例用 获取到的高度 / 设计稿固定的高度。然后再把总的页面区域用这个缩放比例缩放（缩小或者放大）。此时的宽度用 获取到的宽度 / 缩放比例。动态赋值给最外层显示区。
简单的代码如下：
mounted() {
this.autoSetScale() // 进页面先执行一次页面高度和宽度计算然后赋值
window.addEventListener('resize', () => {
this.autoSetScale()
}, false)
methods: {
// 自动缩放屏幕比例
autoSetScale() {
let zoom = (window.innerHeight / 800).toFixed(3)
this.transformScale = `scale(${zoom})`
this.width = `${(window.innerWidth / zoom).toFixed(2)}px`
这是vue页面上赋值的部分
这只是其中的一个简单的页面效果图
自由调节的小屏
这是我实现的简单的业务，有其他方法欢迎留言指教。谢谢
背景：我做的是一个现场活动的游戏页面，对前端适配要求比较高。我选择js框架是vue,ui框架是element-ui。当初我就想做个最小宽度1200然后再结合媒体查询一起使用。然而发现写的代码太多了感觉css控制特别麻烦。而且现场活动的电脑屏幕尺寸还特别的千奇百怪没办法只能重新想方法。我第一次尝试的写法是：首先一屏显示，获取当前页面的窗口的高度，显示区的部分全用设计稿的百分比控制。感觉写了太多的...
要想移动
端
适
配
并使用 rem 您需要先看这篇文章，
配
置好less :right_arrow_selector: 在vue 中使用 less，就可以使用rem了
如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。
postcss-pxtorem：转换px为rem的插件
安装 postcss-pxtorem
npm install postcss-pxtorem --save
新建rem.js文件
const baseSize = 32
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const
scale
=
在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动
端
开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动
端
视口的相关概念。
关于这篇文章说到的所有知识，本质上离不开以下代码
<meta name=viewport content=width=device-width, initial-scala=1, maximum-
scale
=1, minimum-
scale
=1, user-scalable=no />
@media all and (max-width: 320px) {
// do something
了解过移动
端
开发
在做一个图片旋转的demo的时候发现了 父类元素 添加
tansform
对子类定位的影响
当给一个元素加上transform属性的时候，这个元素就会具有relative的特性,所以若一个元素的父元素拥有tranform属性，那么子元素在使用定位属性的时候要注意
今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。
Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放
scale
和移动translate以及矩阵变形matrix。...
1、Transform简介
Transformer中抛弃了传统的CNN和RNN，整个网络结构完全是由Attention机制组成。更准确地讲，Transformer由且仅由self-Attenion和Feed Forward Neural Network组成。一个基于Transformer的可训练的神经网络可以通过堆叠Transformer的形式进行搭建，作者的实验是通过搭建编码器和解码器各6层，总共12层的Encoder-Decoder，并在机器翻译中取得了BLEU值得新高。
2、Transform结构
大厂技术高级前
端
Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言当接到可视化大
屏
需求时，你是否会有以下疑问????如何做一款定制化的
数据
大
屏
？
开发可视化
数据
大
屏
如何做自
适
应？
vm vh、rem、
scale
到底哪种比较好？
时间不够，有没有偷懒的方法？ 最近在公司开发了一个可视化大
屏
，开发定制化大
屏
，大家可能都一个感受，开发大
屏
主要是两方面的工作：大
屏
之关键...
