前端适配方案

推荐方案 vw+vh+rem+媒体查询

meta 元素的视口需声明

<meta name="viewport" content="width=device-width,initial-scale=1.0">

媒体查询更改字体大小

html,
body,
#app {
height: 100%;
font-size: 16px;
margin: 0;
padding: 0;
}
@media screen and (max-width: 1600px) and (min-width: 1280px) {
html,
body,
#app {
font-size: 14px;
}
}
@media screen and (max-width: 1280px) and (min-width: 960px) {
html,
body,
#app {
font-size: 12px;
}
}
@media screen and (max-width: 960px) {
html,
body,
#app {
font-size: 10px;
}
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 8px;
height: 12px;
background-color: #e6e6e6;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #bfc1c4;
}

使用

<template>
<div class="box">测试</div>
</template>
<style>
.box {
width: 100vw;
height: 50vh;
font-size: 1.5rem;
}
</style>
posted @   有些东西学不会  阅读(7)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
历史上的今天:
2022-05-07 Dos命令
2022-05-07 CSS技巧
// 侧边栏目录 // https://blog-static.cnblogs.com/files/douzujun/marvin.nav.my1502.css
点击右上角即可分享
微信分享提示