如何在一个应用程序中实现自适应网页设计

Question

有没有办法在一个组件中使用2个模板？我的意思是，例如我正在构建的网站不是响应式网页设计。因此，有两种不同的观点，即桌面和移动视图。我想为两者使用相同的应用程序。如何在基于用户设备的组件中切换两个模板（一个用于桌面视图，另一个用于移动视图）？那可能吗？

Answer 1

首先，您必须在初始化时检测屏幕大小，并设置特殊标志以了解当前应用程序正在运行的设备。

initializeRWD() { 
    if (screen.width < 1080) { 
     this.isSmallScreen = true; 
    } else { 
     this.isSmallScreen = false; 
    } 
} 

接下来，我会把你的模板<div class="desktop">和<div class="mobile">并根据屏幕尺寸显示它们中的，例如：

<div class="desktop"> *ngIf="!isSmallScreen"> 
    <!-- desktop code here --> 
</div> 

<div class="mobile" *ngIf="isSmallScreen"> 
<!-- mobile code here --> 
</div>`