我如何在材料UI中响应段落？

Question

我是材料UI的新手，我有一个完整的页面，这些内容充满了反应式的内容，我必须做出响应迅速。我以前做过小的网格和盒子，但没有这个规模。例如，我真的不知道如何使整个段落完全出现在手机上。

        <div style={{ padding: "10px" }}></div>
        <Box sx={{ flexGrow: 1 }} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4}>
<Grid container spacing={{ xs: 1, md: 2,  }} columns={{ xs: 2, sm: 2, md: 12 }} display="flex"
  justifyContent="center"
  alignItems="center" >
        <Grid container >
            <Grid item id="about" xs={12} >

                <Grid sx={{ bgcolor: "linear-gradient( 111.6deg, rgba(174,68,223,1) 27.3%, rgba(246,135,135,1) 112.7% )", boxShadow: 5, borderBottom: 1, borderColor: "radial-gradient(90% 100% at 50% 0%, #2d685a 0%, #050606 100%), radial-gradient(90% 100% at 50% 0%, #a86487 0%, #827878 100%), radial-gradient(110% 215% at 100% 0%, #000AFF 0%, #3A5525 100%), linear-gradient(230deg, #000 0%, #09FF04 100%), linear-gradient(130deg, #2D2929 0%, #C4B6FB 100%)" }}>
                    <Typography variant="h1" fontWeight="600" padding="10px" margin="15px" fontSize="22px" align="left">
                        {companyData.name}
                        <span style={{ color: color, marginLeft: "20px", fontWeight: "600" }} >{companyData.changepct}%</span>
                        {companyData.changepct > 0 ? <ArrowUpwardIcon style={{ color: "green", height: "100%" }} /> : <ArrowDownwardIcon fontSize="medium" style={{ color: "red", height: "100%" }} />}
                    </Typography>
                </Grid >
                <div style={{ padding: "10px" }}></div>
                <Typography component="h4" align="left" style={{ marginLeft: "15px", width: "95%" }}>
                    {abtCompany.slice(0, 400)}
                    {value}
                </Typography>
                <div style={{ padding: "10px" }}></div>

                <Grid item id="general-information" xs={12}>
                    <Grid sx={{ boxShadow: 5, borderBottom: 1, borderColor: "radial-gradient(90% 100% at 50% 0%, #2d685a 0%, #050606 100%), radial-gradient(90% 100% at 50% 0%, #a86487 0%, #827878 100%), radial-gradient(110% 215% at 100% 0%, #000AFF 0%, #3A5525 100%), linear-gradient(230deg, #000 0%, #09FF04 100%), linear-gradient(130deg, #2D2929 0%, #C4B6FB 100%)" }}>
                        <Typography variant="h4" fontWeight="600" paddingBottom="10px" paddingTop="10px" margin="15px" fontSize="22px" align="left">General Information</Typography></Grid>
                    <div style={{ padding: "10px" }}></div>
                    <Grid container>
                        <Grid item xs={6} style={{ borderRight: "1px dashed rgba(124, 126, 140, 0.5)" }}>
                            <Grid item xs={12} style={{ margin: "10px", textAlign: "left" }}>
                                <span style={{ margin: "5px", color: "#7c7e8c" }}>CEO</span>
                                <span style={{ fontWeight: "600", margin: "5px", float: "right" }}>{companyData.ceo}</span>
                            </Grid>
                            <Grid item xs={12} style={{ margin: "10px", textAlign: "left" }}>
                                <span style={{ margin: "5px", color: "#7c7e8c" }}>Founded</span>
                                <span style={{ fontWeight: "600", margin: "5px", float: "right" }}>{companyData.founded}</span>
                            </Grid>
                            <Grid item xs={12} style={{ margin: "10px", textAlign: "left" }}>
                                <span style={{ margin: "5px", color: "#7c7e8c" }}>Headquarters</span>
                                <span style={{ fontWeight: "600", margin: "5px", float: "right" }}>{companyData.hq}</span>
                            </Grid>

                        </Grid>

                        <Grid item xs={6}>
                            <Grid item xs={12} style={{ margin: "10px", textAlign: "left", marginTop: "15px" }}>
                                <span style={{ margin: "5px", color: "#7c7e8c" }}>Industry</span>
                                <span style={{ fontWeight: "600", margin: "5px", float: "right" }}>{companyData.industry}</span>
                            </Grid>
                            <Grid item xs={12} style={{ margin: "10px", textAlign: "left" }}>
                                <span style={{ margin: "5px", color: "#7c7e8c" }}>Sector</span>
                                <span style={{ fontWeight: "600", margin: "5px", float: "right" }}>{companyData.sector}</span>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>

加载该页面时，看起来像这样。 。

​ 这。

感谢任何帮助。

Answer 1

中添加以下标签

<meta name="viewport" content="width=device-width, initial-scale=1" />

如果您使用create-react-app ，则在您使用next.js

import Head from 'next/head';
 <Head>
      <title>Title comes here</title>
      <meta name="description" content="Description comes here" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="icon" href="/favicon.ico" />
    </Head>

。 em>

有关更多信息，请访问此处