Адаптивная верстка

@Davchikf · Регистрация: 25.11.2013

Студворк — интернет-сервис помощи студентам

Привет всем.
Такой вот вопрос, нужно сделать так чтобы на разных расширениях экранов сайт смотрелся на все пространство экрана. Знаю что можно все задать в %, но у меня в шапке стоит картинка, которая по идее должна быть на всю ширину окна браузера, и я вот думаю что если к примеру взять Мак экраны то картинка к примеру шириной 1024 растянется и получится некачественное и некрасивое изображение. Можно ли как то этого избежать? И не хотелось бы чтобы при маленьком расширении появлялся горизонтальный скролл.

@devirus · 05.02.2014, 01:50

Конечно, у меня вот 2560 ширина и растянутая 1024 будет очень уныло смотреться)

Картинку делаем большую и качественную для больших экранов, среднюю для планшетов и можно маленькую для мобильных (можно конечно большую уменьшать, но пожалейте мобильный траффик).

Ширина картинки задается в 100% тогда она масштабируется вместе с экраном.

Еще стоит учесть, что читать длинную строку, как сейчас у меня выглядит это сообщение не очень удобно. Стоит разбивать на колонки, чтобы в строках было не более 100 знаков текста.

Остальные нюансы через медиа-запросы типа:

CSS
1
2
3
4
5
6
@media (min-width: 480px) and (max-width: 767px){
    .buy-now{
        font-size: 24px;
        padding: 10px;
        margin-top: 40px;}
}

Через эти же запросы можно разный бэкграунд (большой, средний и маленьки) загружать в шапку (вместо картинки).

@Davchikf · 05.02.2014, 01:56 **[ТС]**

Если я правильно понял выходом будет сделать расширение самой картинки как можно больше, под большие экраны и задать 100% ширину, при этом при меньшем расширении она будет просто масштабироваться? Вопрос тогда еще один, она будет пропорционально масштабироваться или тупо тянуться по ширине оставляя стандартную высоту или её тоже стоит 100% задать?

@devirus · 05.02.2014, 02:20

Всё правильно, картинки будут пропорционально мастабироваться.

CSS
1
2
3
4
5
img {
    -moz-box-sizing: border-box;
    height: auto;
    max-width: 100%;
}

@Davchikf · 05.02.2014, 14:11 **[ТС]**

Еще вот такой вопрос, с картинками я разобрался) но вот что еще, у меня есть меню с прозрачным фоном картинкой, при уменьшении меню сайта начинает масштабироваться и переносится на новую строчку, можно как то сделать чтобы до какого то момента при уменьшении сайт масштабировался, а дольше появлялась полоса прокрутки?

@devirus · 05.02.2014, 15:12

можно

CSS
1
2
3
body{
min-width: 768px;
}

@Davchikf · 05.02.2014, 17:31 **[ТС]**

Я наверное уже достал, но еще один вопрос) после картинки которая должна была масштабироваться у меня по середине указан текст ПОРФОЛИО, и внизу 3 блочных элемента которые выстроены в ряд, ниже КАК МЫ РАБОТАЕМ и тоже картинка, нужно чтобы они были строго по середине экрана при любом масштабе, как это можно проделать?

@devirus · 05.02.2014, 17:45

по горизонтали для строчных элементов: text-align:center;
для блочных элементов: margin:0 auto; (т.е. обернуть 3 блочных элемента в общий с выравниванием и фиксированной шириной - суммой ширины трех блоков).

@Davchikf · 05.02.2014, 19:29 **[ТС]**

Сообщение от devirus

по горизонтали для строчных элементов: text-align:center;
для блочных элементов: margin:0 auto; (т.е. обернуть 3 блочных элемента в общий с выравниванием и фиксированной шириной - суммой ширины трех блоков).

Смотрите, вот такая проблема еще возникла, мне для меню нужен был фон и я все это сделал фиксированным, чтобы при прокрутке меню оставалось на виду, через background: url() задал фон картинкой полупрозрацной, но при этом она с одной стороны идет до конца а слева обрывается, как сделать так чтобы картинка шла с обоих сторон? скриншот прилагается

@Davchikf · 05.02.2014, 19:33 **[ТС]**

Проблему решил)

@Taatshi · 05.02.2014, 21:37

Комментарий администратора

Davchikf, одна тема - один вопрос.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Davchikf 0 / 0 / 0 Регистрация: 25.11.2013 Сообщений: 15

	Адаптивная верстка 04.02.2014, 23:08. Показов 2107. Ответов 10 Метки нет (Все метки) Привет всем. Такой вот вопрос, нужно сделать так чтобы на разных расширениях экранов сайт смотрелся на все пространство экрана. Знаю что можно все задать в %, но у меня в шапке стоит картинка, которая по идее должна быть на всю ширину окна браузера, и я вот думаю что если к примеру взять Мак экраны то картинка к примеру шириной 1024 растянется и получится некачественное и некрасивое изображение. Можно ли как то этого избежать? И не хотелось бы чтобы при маленьком расширении появлялся горизонтальный скролл. 0

@Davchikf 0 / 0 / 0 Регистрация: 25.11.2013 Сообщений: 15
	05.02.2014, 01:56 [ТС]
	Если я правильно понял выходом будет сделать расширение самой картинки как можно больше, под большие экраны и задать 100% ширину, при этом при меньшем расширении она будет просто масштабироваться? Вопрос тогда еще один, она будет пропорционально масштабироваться или тупо тянуться по ширине оставляя стандартную высоту или её тоже стоит 100% задать? 0

@Davchikf 0 / 0 / 0 Регистрация: 25.11.2013 Сообщений: 15
	05.02.2014, 14:11 [ТС]
	Еще вот такой вопрос, с картинками я разобрался) но вот что еще, у меня есть меню с прозрачным фоном картинкой, при уменьшении меню сайта начинает масштабироваться и переносится на новую строчку, можно как то сделать чтобы до какого то момента при уменьшении сайт масштабировался, а дольше появлялась полоса прокрутки? 0

@Davchikf 0 / 0 / 0 Регистрация: 25.11.2013 Сообщений: 15
	05.02.2014, 17:31 [ТС]
	Я наверное уже достал, но еще один вопрос) после картинки которая должна была масштабироваться у меня по середине указан текст ПОРФОЛИО, и внизу 3 блочных элемента которые выстроены в ряд, ниже КАК МЫ РАБОТАЕМ и тоже картинка, нужно чтобы они были строго по середине экрана при любом масштабе, как это можно проделать? 0

@devirus 9 / 9 / 3 Регистрация: 09.06.2012 Сообщений: 51
	05.02.2014, 17:45
	по горизонтали для строчных элементов: text-align:center; для блочных элементов: margin:0 auto; (т.е. обернуть 3 блочных элемента в общий с выравниванием и фиксированной шириной - суммой ширины трех блоков). 0

@Davchikf 0 / 0 / 0 Регистрация: 25.11.2013 Сообщений: 15
	05.02.2014, 19:33 [ТС]
	Проблему решил) 0

Адаптивная верстка

Решение