顶部菜单栏响应式

This commit is contained in:
myh 2024-01-04 01:18:24 +08:00
parent ab355594ef
commit bac7d19682
2 changed files with 42 additions and 5 deletions

View File

@ -1,3 +1,19 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* header.component.css */
.flex {
/* 标题栏的通用样式 */
/* ... */
/* 响应式布局样式 */
}
/* 媒体查询样式 */
@media (max-width: 768px) {
.flex {
/* 在移动设备上的样式 */
/* ... */
}
}

View File

@ -1,6 +1,6 @@
import {Component} from '@angular/core';
import {NgOptimizedImage} from '@angular/common';
import {RouterLink} from "@angular/router";
import { Component, HostListener, OnInit } from '@angular/core';
import { NgOptimizedImage } from '@angular/common';
import { RouterLink } from "@angular/router";
@Component({
standalone: true,
@ -9,5 +9,26 @@ import {RouterLink} from "@angular/router";
styleUrls: ['./top-bar.component.scss'],
imports: [NgOptimizedImage, RouterLink],
})
export class TopBarComponent {
export class TopBarComponent implements OnInit {
isMobile: boolean = false;
constructor() {
}
@HostListener('window:resize', ['$event'])
onResize(event: Event) {
this.updateLayout();
}
ngOnInit(): void {
this.updateLayout();
}
updateLayout() {
const screenWidth = window.innerWidth;
this.isMobile = screenWidth < 768;
}
}