update: 根元素字体大小改为媒体查询设置
parent
f82a44ce81
commit
1792b30163
|
@ -6,7 +6,7 @@ const config = {
|
||||||
rootValue: 14.4, // 默认的根元素字体大小
|
rootValue: 14.4, // 默认的根元素字体大小
|
||||||
unitPrecision: 5, // 单位转换后保留的精度
|
unitPrecision: 5, // 单位转换后保留的精度
|
||||||
propList: ['*'], // 转换哪些属性,'*' 表示全部
|
propList: ['*'], // 转换哪些属性,'*' 表示全部
|
||||||
selectorBlackList: [], // 不转换的类名
|
selectorBlackList: [/^body$/, /^html$/],
|
||||||
minPixelValue: 0, // 小于或等于`1px`的不转换为`rem`
|
minPixelValue: 0, // 小于或等于`1px`的不转换为`rem`
|
||||||
mediaQuery: false, // 允许在媒体查询中转换`px`
|
mediaQuery: false, // 允许在媒体查询中转换`px`
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,15 +17,13 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
|
||||||
const [show, setShow] = useState(false)
|
const [show, setShow] = useState(false)
|
||||||
const [hash, setHash] = useState('#home')
|
const [hash, setHash] = useState('#home')
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const designWidth = 1440;
|
// const designWidth = 1440;
|
||||||
const deviceWidth = document.documentElement.clientWidth
|
// const deviceWidth = document.documentElement.clientWidth
|
||||||
let scale = 1
|
// let scale = 1
|
||||||
console.log('designWidth', deviceWidth)
|
// if (deviceWidth <= 1440) {
|
||||||
if (deviceWidth <= 1440) {
|
// scale = deviceWidth / designWidth;
|
||||||
scale = deviceWidth / designWidth;
|
// }
|
||||||
}
|
// document.documentElement.style.fontSize = `${scale * 14.4}px`;
|
||||||
console.log('scale', scale)
|
|
||||||
document.documentElement.style.fontSize = `${scale * 14.4}px`;
|
|
||||||
switch (hash) {
|
switch (hash) {
|
||||||
case '#home':
|
case '#home':
|
||||||
const home = document.getElementById('home')
|
const home = document.getElementById('home')
|
||||||
|
@ -96,7 +94,7 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
navList.map((item: NavType) => (
|
navList.map((item: NavType) => (
|
||||||
<div onClick={() => setHash(item.href)} key={item.name}>
|
<div onClick={() => setHash(item.href)} key={item.name} className="menu-item">
|
||||||
<div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}>
|
<div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}>
|
||||||
<div className="my-[10px] w-[144px] text-[18px]">{item.name}</div>
|
<div className="my-[10px] w-[144px] text-[18px]">{item.name}</div>
|
||||||
{
|
{
|
||||||
|
|
|
@ -10,4 +10,135 @@
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
}
|
}
|
||||||
|
html {
|
||||||
|
font-size: 14.4px;
|
||||||
|
}
|
||||||
|
.menu-item {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
@media (min-width: 300px) and (max-width: 350px) {
|
||||||
|
html {
|
||||||
|
font-size: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 350px) and (max-width: 400px) {
|
||||||
|
html {
|
||||||
|
font-size: 3.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 400px) and (max-width: 450px) {
|
||||||
|
html {
|
||||||
|
font-size: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 450px) and (max-width: 500px) {
|
||||||
|
html {
|
||||||
|
font-size: 4.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 500px) and (max-width: 550px) {
|
||||||
|
html {
|
||||||
|
font-size: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 550px) and (max-width: 600px) {
|
||||||
|
html {
|
||||||
|
font-size: 5.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 600px) and (max-width: 650px) {
|
||||||
|
html {
|
||||||
|
font-size: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 650px) and (max-width: 700px) {
|
||||||
|
html {
|
||||||
|
font-size: 6.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 700px) and (max-width: 750px) {
|
||||||
|
html {
|
||||||
|
font-size: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 750px) and (max-width: 800px) {
|
||||||
|
html {
|
||||||
|
font-size: 7.6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 800px) and (max-width: 850px) {
|
||||||
|
html {
|
||||||
|
font-size: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 850px) and (max-width: 900px) {
|
||||||
|
html {
|
||||||
|
font-size: 8.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 900px) and (max-width: 950px) {
|
||||||
|
html {
|
||||||
|
font-size: 9px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1000px) and (max-width: 1050px) {
|
||||||
|
html {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1050px) and (max-width: 1100px) {
|
||||||
|
html {
|
||||||
|
font-size: 10.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1100px) and (max-width: 1150px) {
|
||||||
|
html {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1150px) and (max-width: 1200px) {
|
||||||
|
html {
|
||||||
|
font-size: 11.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) and (max-width: 1250px) {
|
||||||
|
html {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1250px) and (max-width: 1300px) {
|
||||||
|
html {
|
||||||
|
font-size: 12.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1300px) and (max-width: 1350px) {
|
||||||
|
html {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1350px) and (max-width: 1400px) {
|
||||||
|
html {
|
||||||
|
font-size: 13.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1400px) and (max-width: 1450px) {
|
||||||
|
html {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1440px) {
|
||||||
|
html {
|
||||||
|
font-size: 14.4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1440px) {
|
||||||
|
.menu-item {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1440px) {
|
||||||
|
.menu-item {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue