【实战干货】UI 设计了不同 size 的海报/html 页面怎么办?

原则

我们只会针对某一个最大 size 来实现代码!

并且,我们肯定不可能每个 size 都写一份代码!!!

怎么办?

使用 scale 来实现!

1.scale 缩小

css 复制代码
tramsform:scale(0.5)

这个时候是从中心开始缩放的,我们希望是从左上角开始缩放:

2.左上角开始缩放

css 复制代码
transform-origin: left top;

突然发现缩放之后,虽然目标 dom 看起来宽高变小了,但是实际宽高还是那个值,我们希望实际宽高变成 缩放之后的宽高:

3.实际宽高也缩放

  1. 如果该被缩放的 dom 的宽高是固定的,那么可以通过缩放比,直接计算出缩放之后的宽高,设置给该 dom 的父元素。
  2. 如果该缩放的 dom 的宽高是不固定的,那么需要通过 js 获取缩放之后的 dom 的实际宽高,再设置给该 dom 的父元素
相关推荐
mCell20 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip20 小时前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript