Адаптивный дизайн, Css, входы и другие элементы не масштабируются по вертикали? - PullRequest
0 голосов
/ 01 июня 2018

Я плохо знаком с HTML и CSS (возможно, 4/5 месяцев опыта). Я начал разрабатывать несколько веб-сайтов в качестве учебной базы, а затем я понял, что все мои проекты не были «адаптивными», поэтому впоследствииЯ начал заменять все свои значения 'px' на vw, vh, vmax & vmin .. Я наткнулся на какую-то кирпичную стену с моей кривой обучения и задаюсь вопросом, сталкивался ли кто-то еще с этим или знает какие-нибудь хорошие источники, которые могли быпомогите просветить меня ..

Использование свойства 'vw' на первый взгляд идет хорошо, когда я меняю размер браузера, все сжимается, как и предполагалось, до ширины области просмотра, но получая вертикальное масштабирование объектов, div,входы и опции оказываются довольно сложными.Я попытался поиграть с calc () vmin, vmax, vh и т. Д., Но они не кажутся взаимозаменяемыми, пока я не вставлю все это в переменные css.Я знаю, что flex-box и grid спроектированы так, чтобы быть отзывчивыми, но они все еще мало помогают для вертикального масштабирования на небольших устройствах.

Я слышал о em & rems как единицах для шрифта, но онине «отзывчивы», как Vw & Vh.т. е. изменение размера при изменении размера окна.

Если я что-то упускаю, поиск в YouTube для адаптивного дизайна дает только сотни результатов как для flex-box, так и для grid.Но ничего особенного для общего уменьшения высоты и ширины (пропорционально).

Первый главный вопрос: какой из двух лучше для пропорционального масштабирования (Vmin или Vmax)?через целый ряд устройств?если я в настоящее время не собираюсь использовать какие-либо медиа-запросы?

Я пробовал несколько вариантов calc (vw - * / + vmin / vmax) + px / em / vh / vw / rem .. новертикальные измерения все еще остаются неизменными ... Может ли кто-нибудь указать мне хороший ресурс или видео на YouTube для этой темы ...

Я считаю, что элемент проверки / тестирование приложением устройства в Firefox очень полезен, нонужно подтолкнуть в правильном направлении .... Есть идеи ??

Ответы [ 2 ]

0 голосов
/ 01 июня 2018

Первым делом нужно проверить, установлен ли мета viewport в вашем файле index.html.Если нет, то это должен быть ваш первый шаг.Во-вторых, прежде чем писать CSS для веб-сайта, вы должны пройти через flex box и сетки в css.Вы можете сэкономить с сетками, но гибкая коробка имеет первостепенное значение.Тогда вы можете пойти дальше и немного изучить модель BEM для css.Игра с процентами и REM или vh может не помочь, так как у вас будет веб-страница, которая будет уменьшаться и расширяться в зависимости от содержимого, которое вы склонны отображать.Поэтому вам следует учитывать не макет вашего веб-сайта, а то, что все должно оставаться неизменным, и что все изменится при переключении на другое устройство.Вы также должны пройти через минимальную высоту, максимальную высоту и минимальную ширину, максимальную ширину с гибкой коробкой, которая облегчит вашу жизнь.Удачи !!!!

0 голосов
/ 01 июня 2018

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

...