Ответы пользователя по тегу DLE
  • Как адаптировать сайт по высоте?

    yarhosting
    @yarhosting
    Заказывайте программинг: PHP,SQL, JS,jQuery,Joomla
    Лучше всего сделать разбивку согласно стандартным расширениям экрана на несколько групп, аналогично как это сделано в bootstrap по ширине (https://bootstrap-4.ru/docs/4.1/layout/overview/)

    Потом в эту разбивку по высоте проще будет подгонять все страницы и элементы дизайна

    например:

    Некий блок в верху главной страницы, например с менюшкой или главным слоганом должен красиво смотреться имея разный шрифт, отступ и ширину - будет выглядеть примерно так:

    @media screen and (max-height: 600px) { 
    	.div{
    		font-size:10px;
    		height:40px;
    		margin-top:30px;
    	}
    }
    @media screen and (min-height: 600px) and (max-height: 768px) { 
    	.div{
    		font-size:10px;
    		height:50px;
    		margin-top:50px;
    	}
    }
    @media screen and (min-height: 768px) and (max-height: 960px) { 
    	.div{
    		font-size:14px;
    		height:100px;
    		margin-top:70px;
    	}
    }
    @media screen and (min-height: 960px) and (max-height: 1024px) { 
    	.div{
    		font-size:16px;
    		height:150px;
    		margin-top:100px;
    	}
    }
    @media screen and (min-height: 1024px) { 
    	.div{
    		font-size:18px;
    		height:180px;
    		margin-top:150px;
    	}
    }


    Как правило, чтобы не путаться с плавающими по высоте блоками делают их: position:absolute; width:100% и задают им top или margin-top а уже внутри делают контейнер с плавающей шириной и margin: 0 auto;. Под эти блоки как правило делают див с фоновой картинкой в размер экрана

    section {
    	position:absolute;
    	width: 100%; /* ширина секции равна ширине области просмотра */
    	height: 100vh; /* высота секции равна высоте области просмотра */
    }


    Из важного: не ленитесь писать screen, чтобы эти правила распространялись только на экранную разбивку и делайте в конце отдельно printверсию с совершенно другим дизайном под А4 ;)

    Вот пример разбивки блоков по высоте (шапка на главной) https://cf-dynamite.ru/

    Если плавающих по высоте элементов не много (например какойто текст призывающий к действию и кнопка на фоне картинки с весь экран), то можно использовать проценты от высоты экрана height: XXXvh; и распределить элементы относительными блоками внутри блока с размерами экрана.
    Ответ написан
    4 комментария