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 断点设置方向:纵向和横向视图的主要内容,如果未能解决你的问题,请参考以下文章
关闭 MailComposerView 后 UITableView 方向错误
如何在 jquery 移动 Web 应用程序中为纵向和横向屏幕方向设置相同的图像大小?