58 lines
1.3 KiB
SCSS
58 lines
1.3 KiB
SCSS
$main-color: #30BF78; // 用户端主题色
|
|
|
|
// 字号大小
|
|
$sm-size: .32rem /* 24/75 */;
|
|
$size26: .3467rem /* 26/75 */;
|
|
$md-size: .3733rem /* 28/75 */;
|
|
$size30: .4rem /* 30/75 */;
|
|
$lg-size: .4267rem /* 32/75 */;
|
|
// 颜色
|
|
$white: #ffffff;
|
|
|
|
/* PC端适配 - 使用缩放保持比例 */
|
|
@media screen and (min-width: 769px) {
|
|
body {
|
|
background-color: #f5f5f5;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
}
|
|
|
|
#app {
|
|
// 假设设计稿是750px宽度，我们可以按比例缩放
|
|
width: 750px;
|
|
height: 100vh;
|
|
transform-origin: center top;
|
|
|
|
// 计算缩放比例，假设PC端最小宽度为1200px
|
|
// 可以根据实际需要调整这个值
|
|
transform: scale(0.8); // 例如缩放到80%
|
|
|
|
// 或者根据实际视口宽度动态计算
|
|
// transform: scale(calc(100vw / 750));
|
|
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
// 为特定高度的屏幕调整缩放
|
|
@media screen and (min-width: 1200px) {
|
|
#app {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1000px) and (max-width: 1199px) {
|
|
#app {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 769px) and (max-width: 999px) {
|
|
#app {
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
}
|