css - React : Need to set media queries for dropdown elements in React Project, 但不确定如何使用样式化组件

标签 css reactjs media-queries styled-components

我有两个下拉菜单需要做出响应,以便它们移动到居中位置而不是在屏幕尺寸小于 1024 像素时跑出页面。我也不确定如何使用样式化组件来解决这个问题。我在代码中加入了 Stack Blitz:https://stackblitz.com/edit/react-t35k77?file=Offers.js

最佳答案

有多种方法可以实现这一点。 CSS 媒体查询似乎是最简单的。

https://www.styled-components.com/docs/advanced#media-templates

尝试这样的事情让自己开始:

const DropdownRow = styled.div`
  display: flex;

  @media (max-width: 1024px) {
    flex-direction: column;
    justify-content: center;
  }

    th:first-child {
    width: 25%;
  }

  flex: 1;
  align-items: stretch;
  padding: 20px 30px 20px 10px;
  width: 60%;
  margin-left: 42%;
`

关于css - React : Need to set media queries for dropdown elements in React Project, 但不确定如何使用样式化组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56191911/

相关文章:

javascript - 解析错误: Line 1: Illegal import declaration

html - 移动和桌面显示 CSS 背景颜色

html - Bootstrap 可滚动列,高度为 100%

html - 全高 HTML 屏幕是个好主意吗?

javascript - React Js,this.context 在构造函数方法中未定义

javascript - 如何在 React、Jest 和 Enzyme 中查找包含特定值的 div 的计数

css - 媒体查询被先前的规则覆盖

html - iPhone 上的 Safari 是否有等同于 Android 的 <meta name ='viewport' content ='target-densitydpi=device-dpi' > 的东西?

javascript - 如何使用 javascript 更改@keyframes 值?

css - 从 Bootstrap 4 网格中删除装订线