Question

我正在使用Angular版本4开发Web应用程序。

我想为小型设备和大屏幕设备展示不同的风格。例如，当用户在移动设备上浏览时，页面将会很长，这在UX点上并不好，但如果我可以将那个长页面转换为用户可以在它们之间滑动的标签页（如菜单）会更好）。引导程序或Angular 4中的任何技术是否有任何已知的方法来帮助我？

Answer 1

您可以使用媒体查询，并为每个创建单独的文件：

//index.html

<link rel="stylesheet" media="(max-width: 360px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width: 361px) and (max-width: 1080px)" href="tablet.css" />
<link rel="stylesheet" media="(min-width: 1081px)" href="desktop.css" />

或在一个文件中创建所有内容：

//style.css

@media (max-width: 360px) {
  //Mobile
}
@media (min-width: 361px) and (max-width: 1080px) {
  //Tablet
}
@media (min-width: 1081px) {
  //Desktop
}

另请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

如何在不同的设备中改变整体风格？

1 个答案: