【实战干货】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 的父元素
相关推荐
哎呦你好6 分钟前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
盛夏绽放16 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao32 分钟前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo32 分钟前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er38 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年41 分钟前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er1 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
CH_Qing1 小时前
【udev】关于/dev 设备节点的生成 &udev
linux·前端·网络
小诸葛的博客1 小时前
gin如何返回html
前端·html·gin
islandzzzz1 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html