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

【问题标题】：How is it possible to change whole style in different devices?如何在不同的设备中改变整体风格？
【发布时间】：2017-11-20 07:54:33
【问题描述】：

我正在开发一个使用 Angular 4 版的网络应用程序。

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

【问题讨论】：

标签： css twitter-bootstrap angular responsive-design

【解决方案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

【讨论】：

我知道 :) 我询问了其他可以给我更多机会的方法。媒体查询不会让你成为新的 HTML 元素
@TypeScriptLearner 不，不会。但是你总是可以创建你需要的所有元素，然后通过设置 display: none 隐藏你当前不需要的元素。但是，如果您想根据不同的设备尺寸做一些花哨的 javascript，我建议您使用 window.matchMedia