Material UI 断点设置方向:纵向和横向视图

Posted

技术标签:

【中文标题】Material UI 断点设置方向:纵向和横向视图【英文标题】:Material UI breakpoints to set orientation: portrait and landscape view 【发布时间】:2019-02-08 13:12:25 【问题描述】:

希望能够在 Material UI 中为平板电脑的样式对象设置纵向和横向视图

const styles = theme => (
  root: 
    padding: theme.spacing.unit,
    [theme.breakpoints.up('md')]: 
      backgroundColor: theme.palette.secondary.main
    
  

如何为纵向视图和横向视图添加断点,类似于传统的媒体查询:

@media screen and (orientation: landscape) 
  body 
    flex-direction: row;
  


@media screen and (orientation: portrait) 
  body 
    flex-direction: column;
  

【问题讨论】:

你遇到了什么问题? 【参考方案1】:

只需设置类似的东西:

const styles = theme => (
  root: 
    padding: theme.spacing.unit,
    [`$theme.breakpoints.up('md') and (orientation: portrait)`]: 
      flexDirection: 'column'
    
  

【讨论】:

【参考方案2】:

你可以使用这样的东西:

'@media (orientation: landscape)': 
  flexDirection: `orientation`,
,

对于组件媒体查询将附加。

【讨论】:

只记住这条规则,应该作为一个单独的元素而不是作为一个嵌套元素。【参考方案3】:

在 4.11.1 版本中使用过这个

const useStyles = makeStyle((theme) =>(
    container:
        border:"1px dashed red",
        [theme.breakpoints.down("md")]
           border: "1px solid blue",
           '@media (orientation: landscape)': 
              border: "1px solid green",,
            ,
        ,
    ,
));

【讨论】:

以上是关于Material UI 断点设置方向:纵向和横向视图的主要内容,如果未能解决你的问题,请参考以下文章

方向纵向和横向模式

为 iPad 而不是 iPhone 设置横向方向

关闭 MailComposerView 后 UITableView 方向错误

如何在 jquery 移动 Web 应用程序中为纵向和横向屏幕方向设置相同的图像大小?

Android:如何在设置图像视图时检测从图库中选择的图像方向(纵向或横向)?

IOS 设备方向卡在纵向模式,没有横向