如何在一个应用程序中实现自适应web设计
如何在一个应用程序中实现自适应web设计
提问于 2016-10-12 22:23:00
有没有办法在一个组件中包含两个模板？我的意思是，例如，我正在建设的网站不是响应式网页设计。因此，有两种不同的视图，桌面视图和移动视图。我想对这两个应用程序使用相同的应用程序。如何在基于用户设备的组件中切换两个模板(一个用于桌面视图，一个用于移动视图)？这有可能吗？
回答 1
Stack Overflow用户
发布于 2016-10-12 22:31:52
首先，你必须在初始化时检测屏幕大小，并设置一个特殊的标志，以了解应用程序当前运行在哪个设备上。
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>`页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40001113
复制相关文章
相似问题
腾讯云开发者
