Не в состоянии сделать адаптивный дизайн из-за "запаса", как встроенный CSS - PullRequest
Новая
       2

Не в состоянии сделать адаптивный дизайн из-за "запаса", как встроенный CSS

0 голосов
/ 18 октября 2019

Я занимаюсь дизайном страницы, которая должна быстро отображаться на больших, средних и маленьких экранах. Я использую контейнер Material ui Grid и внутри него отображается Chips с style={{ marginLeft: 60 }} от второго чипа и далее, чтобы сохранить расстояние между первой, второй, третьей и т. Д., Но как только размер моего экрана изменяется, эти чипы получаютнакладываются друг на друга, но не реагируют на поведение. Ниже мой код 

 <Grid container item xs={12}>
            <Grid container item xs={11}>
                <Grid item xs={2}>
                    <Chip/>
                </Grid>

                <Grid item xs={2} style={{ marginLeft: 60 }}>
                  <Chip/>
                </Grid>

                <Grid item xs={2} style={{ marginLeft: 60 }}>
                   <Chip/>
                </Grid>

                <Grid item xs={2} style={{ marginLeft: 60 }}>
                     <Chip/>
                </Grid>

                <Grid item xs={2} style={{ marginLeft: 57 }}>
                     <Chip/>
                </Grid>

            </Grid>
</Grid>

Как правильно оформить мой дизайн? Пожалуйста, предложите. Спасибо ..

1 Ответ

1 голос
/ 18 октября 2019

Вы объявляете статические размеры полей в пикселях, которые не будут уменьшаться с размером экрана. Либо измените их на относительные размеры (например, style={{ marginLeft: '5%' }}), либо присвойте сеткам свойство className и используйте медиазапросы в вашем файле CSS, чтобы установить точки останова на требуемые размеры экрана.

Последний вариант обеспечит вам гораздо больший контроль, если требуется оперативность.

...