Как пользоваться @media screen

@inquisitor · Регистрация: 22.12.2015

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

Суть задачи есть шапка сайта шириной 1920 пикселей.На ней вверху справа расположены три иконки соц стей 49 на 46 пикселей.
Задача состоит в том,что бы при масштабировании браузера иконки не сползали,влево при уменшении,вправо при увеличении.Сама шапка должна быть шириной в экран браузера и вместиться целиком.
Исходник+рисунки в архиве,киберфорум сам ссылки поставил.
Какие в природе бывают @media screen по max-width и min-width
?

test.rar

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Безымянная страница</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
 
   <div id="wb_indexImage1" style="">
      <img src="https://www.cyberforum.ru/images/01.png" id="indexImage1" alt="">
   </div>
   <div id="wb_indexImage2" style="">
      <img src="https://www.cyberforum.ru/images/vk.png" id="indexImage2" alt="">
   </div>
   <div id="wb_indexImage3" style="">
      <img src="https://www.cyberforum.ru/images/fb.png" id="indexImage3" alt="">
   </div>
   <div id="wb_indexImage4" style="">
      <img src="https://www.cyberforum.ru/images/In.png" id="indexImage4" alt="">
   </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/*шапка*/
#indexImage1
{
   border: 0px #000000 solid;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   position:absolute;
   width:100%;
   z-index:0;
}
/*иконка*/
#indexImage2
{
   border: 0px #000000 solid;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   position:absolute;
   left:1364px;
   top:14px; 
   z-index:1;
}
/*иконка*/
#indexImage3
{
   border: 0px #000000 solid;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   position:absolute;
   left:1410px;
   top:14px;
   z-index:2;
}
/*иконка*/
#indexImage4
{
   border: 0px #000000 solid;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   position:absolute;
   left:1459px;
   top:14px;
   z-index:3;
}

@Дмитрий0482 · 14.10.2017, 17:54

CSS
1
2
@media screen and (min-width:1150px){ }
@media screen and (max-width:1150px){ }

@inquisitor · 14.10.2017, 20:57 **[ТС]**

а дальше как?

@Дмитрий0482 · 15.10.2017, 00:47

шапкой вы имеете виду блок с картинкой 01.png, и какой высоты он должен быть?

Добавлено через 32 минуты
посмотрите может вам так сойдет, или я не правильно понял?

HTML5
1
2
3
4
5
6
7
8
9
10
<body>
 
   <div id="wb_indexImage1" >
 
      <img src="images/vk.png" id="indexImage2" alt="">
      <img src="images/fb.png" id="indexImage3" alt="">
      <img src="images/In.png" id="indexImage4" alt="">
    
   </div>
</body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#wb_indexImage1{
   background: url(images/01.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width:100%;
   max-width:1920px;
   height: 150px;
    border: 2px #000000 solid;
    position:relative;
   margin:0px auto;
}
#indexImage2
{
   border: 1px #000000 solid;
   width: 49px;
   height: 46px;
   position:absolute;
   right: 10px;
   top:14px; 
   z-index:1;
}
#indexImage3
{
   border: 1px #000000 solid;
   right: 70px;
   top: 14px;
   width: 49px;
   height: 46px;
   position:absolute;
   z-index:2;
}
#indexImage4
{
   border: 1px #000000 solid;
   right: 130px;
   top: 14px;
   width: 49px;
   height: 46px;
   position:absolute;
   z-index:3;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	14.10.2017, 20:57 [ТС]
	а дальше как? 0