示例 HTML
将自动缩放的内容放置于
<div class="main"></div>内部，且使用rem单位。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动缩放</title>
<link rel="stylesheet" href="scale.css">
</head>
<body>
<div class="main">
<p>按比例缩放</p>
</div>
</body>
</html>
示例 CSS
文件名：
scale.css
@charset "utf-8";
* {
margin: 0;
padding: 0;
outline: none;
}
/* 媒体查询 */
/* 以高度为准 */
@media screen and (min-aspect-ratio: 36 / 64) {
html {
font-size: calc(100vh / 40) !important;
}
}
/* 以宽度为准 */
@media screen and (max-aspect-ratio: 36 / 64) {
html {
font-size: calc(100vw / 22.5) !important;
}
}
/* 根元素 */
html {
font-size: 16px;
}
/* 自动缩放的内容所在的 DIV */
.main {
/* 页面居中 */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 设定高度 & 宽度 */
height: 40rem;
width: 22.5rem;
/* 背景颜色 */
background-color: #2196F3;
}
/* 示例文本 */
.main > p {
padding-top: 16rem;
text-align: center;
font-size: 2rem;
color: #FFF;
}
操作步骤
- 根据需要设定页面比例
例如：
宽:高 = 36:64
- 在 CSS 中设置媒体查询，把“页面比例”填入到对应的地方
例如：
36 / 64
/* 以高度为准 */
@media screen and (min-aspect-ratio: 36 / 64) {
}
/* 以宽度为准 */
@media screen and (max-aspect-ratio: 36 / 64) {
}
- 在 CSS 中将根元素的
font-size设为16px
html {
font-size: 16px;
}
- 根据
16px = 1rem计算出页面默认的高度和宽度（单位：rem），并在 CSS 中设置
例如：默认高度
640px，宽度360px；则高度设为40rem，宽度设为22.5rem。
.main {
height: 40rem;
width: 22.5rem;
}
- 在 CSS 中将数值分别写入到
第 2 步设置的媒体查询中对应的地方
“数值”是在
第 3 步中计算得到的高度和宽度值（不带单位）
例如：calc(100vh /40) 和 calc(100vw /22.5)
/* 以高度为准 */
@media screen and (min-aspect-ratio: 36 / 64) {
html {
font-size: calc(100vh / 40) !important;
}
}
/* 以宽度为准 */
@media screen and (max-aspect-ratio: 36 / 64) {
html {
font-size: calc(100vw / 22.5) !important;
}
}
效果
效果图
网友评论