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

问题描述：

我想为较小的设备和大屏幕设备显示不同的样式。例如，当用户在移动大小的设备上浏览时，该页面将非常长，这在UX点上不是很好，但如果我可以将该长页面转换为用户可以在它们之间滑动的制表符（如菜单）。有没有什么已知的方式通过引导或Angular 4中的任何技术来帮助我？

答

您可以使用媒体查询，然后为每一个单独的文件：

//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]（https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia） –

谢谢雅各:) –

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

相关推荐