如何根据设备大小渲染不同的组件？

问题描述 投票：0回答：5

我正在寻找构建一个断点为 1024 的响应式应用程序。 当用户登录/注册时，将会有几个问题需要回答。

在移动设备上，这将在屏幕上一次呈现为一个问题。然后，用户将看到一个滑动过渡屏幕，将他们移至下一个问题。

一旦超过断点，所有问题将同时呈现在屏幕上。

有谁知道是否有任何样式框架可以处理类似的事情，或者有任何基于像素宽度的条件渲染的解决方法？

这将是一个基于 React 的应用程序。目前正在使用粉底进行造型。

reactjs zurb-foundation device styling react-rendering
5个回答
29
投票

您可以使用设置 display: none 的 CSS 媒体查询来为不同大小创建断点。或者您可以使用 React 响应式库 根据媒体查询渲染 React 组件。

css 媒体查询示例（将其插入 .css 文件并将其包含到您的应用程序中）：

//Any device with className .loginFeature below 1024px will not be displayed
@media (max-width: 1024px) {
  .loginFeature:{
    display: none;
  }
}

React响应示例：

<MediaQuery query="(max-device-width: 1024px)">
  //Insert any components/html here that you want rendered thats below 1024px
</MediaQuery>
9
投票

对于您的反应项目，请查看反应响应。使用它导入一个名为 MediaQuery 的组件。 MediaQuery 仅在满足您为其设置的条件时才会呈现其子组件。

安装：

yarn add react-responsive

将此行添加到您的项目中以导入 MediaQuery：

import MediaQuery from "react-responsive";

然后使用 MediaQuery 有条件地呈现您的内容或您的案例问题：

<MediaQuery query=(min-width: 1024px)>
    <div className="question">
        ...
    </div>
</MediaQuery>

您可以在此处找到有关反应响应的更多信息。

4
投票

如果您在 React 应用程序中使用 Material UI 作为样式库，那么可以通过两种方法来完成此操作。

因此，在解释方法之前，我将快速解释使用 Material UI

设计响应式设计的 6 个基础术语

他们是 - 

xs,sm,md,lg,xl
顾名思义， xs - xtra 小、sm - 小、md - 中、lg - 大和 xl - xtra 大，这些只是设备大小的断点变量。

范围从 0 - 1920px，其中每个断点代表小于其绝对值的值。

所以，sm = 600px，那么这意味着从 0 - 600 的所有设备都属于 sm 类别，这个概念也适用于其他断点变量。 看看这个

因此，您可以在网格或容器中使用它，它会相应地进行调整。 您也可以在样式中使用它，它也是一个 Material UIi 组件。 例如 -

const styles = (theme) => ({
  root: {
    padding: theme.spacing(1),
    [theme.breakpoints.down('md')]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up('lg')]: {
      backgroundColor: green[500],
    },
  },
});

因此，从 xs 到 md 的所有尺寸都将具有辅助颜色，从 md 到 lg 将具有主颜色，而 lg 以上的设备尺寸将具有绿色。

您可以尝试并针对多种条件样式执行此操作，以实现响应式设计。

如果你想渲染一个完全不同的组件，那么你可以使用 Material UI 提供的 useMediaQuery 钩子。

例如-

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up('sm'));

  return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
}

这里，如果设备大小，匹配来自 sm - xl 的断点，则匹配常量将为 true，如果小于 sm，则为 false。

钩子返回一个布尔值，对于我们传递它的断点。

总而言之，我发现这两种简单的方法对于设计响应式屏幕来说非常强大。

0
投票

你看过 bootstrap 了吗？ bootstrap 4: https://reactstrap.github.io/ 和 bootstrap 3: https://react-bootstrap.github.io/

都有 React 库
-1
投票

适用于台式机

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

适用于手机和平板电脑

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.