С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
androidos
29 / 27 / 5
Регистрация: 07.07.2011
Сообщений: 775
1

Сделать адаптивность для мобильного телефона

05.07.2016, 00:08. Просмотров 892. Ответов 7
Метки нет (Все метки)

Здравствуйте. Я не стал выкладывать сам код, просто удобнее архив, там 3 файлика всего. Если запустить индекс файл и сделать ресайз окна, то будет видно, что смотрится не адаптивно. Может кто сможет подправить? Буду очень благодарен.
0
Вложения
Тип файла: 7z timer.7z (8.4 Кб, 2 просмотров)
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
05.07.2016, 00:08
Ответы с готовыми решениями:

Вывод изображения большего размера для мобильного телефона
Привет, есть изображение <img class="photo" src="укл-к-фото.jpg" alt="" /> ...

Как выставить номер мобильного телефона на сайт
Всем привет. У меня не получается, выставить по координатам номер мобильного...

Необходимо сделать адаптивность блока
Доброго времени суток. Подскажите как сделать адаптивность. У меня есть блок,...

Нужно сделать адаптивность под планшет и телефон
помогите сделать адаптивность под планшет и телефон задача проста, но я...

Как сделать расстояние у изображений в ряд и не потерять адаптивность
Нужно сделать расстояние между фотками, но если я добавлю margin-left вся...

7
Resume
142 / 132 / 69
Регистрация: 08.11.2013
Сообщений: 768
Записей в блоге: 5
05.07.2016, 00:24 2
Как вы определили, что не адаптивно смотрится ?
1
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
05.07.2016, 00:44 3
Используйте медиа-запросы
1
androidos
29 / 27 / 5
Регистрация: 07.07.2011
Сообщений: 775
05.07.2016, 01:16  [ТС] 4
Цитата Сообщение от Resume Посмотреть сообщение
Как вы определили, что не адаптивно смотрится ?
Пробовал окно экрана сжать. Ставил также метатег viewport для мобайл, но я то знаю что у меня неадаптивная верстка...

Добавлено через 35 секунд
Цитата Сообщение от mrtoxas Посмотреть сообщение
Используйте медиа-запросы
к сожалению не разбираюсь, поэтому за помощью обратился
0
Resume
142 / 132 / 69
Регистрация: 08.11.2013
Сообщений: 768
Записей в блоге: 5
05.07.2016, 01:23 5
Как верно подметил mrtoxas, что необходимо использовать медиазапросы, чтобы сделать адаптивную верстку.
В сети много примеров, как это сделать.
CSS
1
2
3
4
5
@media screen and (max-width: 320px) {
.selector{
/* Ваши стили!*/
}
}
Это пример медиазапроса под мобильные устройства.
1
androidos
29 / 27 / 5
Регистрация: 07.07.2011
Сообщений: 775
05.07.2016, 01:47  [ТС] 6
Цитата Сообщение от Resume Посмотреть сообщение
Это пример медиазапроса под мобильные устройства.
если бы у меня было 2 - 3 блока див, я бы сам справился с гуглом, но у меня вообще теги, котоые я в первый раз вижу - DL, DT, DD

Javascript
1
layout: '<dl><dt id="years_lbl">YEARS</dt><dd id="years">{ynn}</dd><dt id="months_lbl">MONTHS</dt><dd id="months">{onn}</dd><dt id="days_lbl">DAYS</dt><dd id="days">{dnn}</dd><dt id="hrs_lbl">HOURS</dt><dd id="hours">{hnn}</dd><dt id="mins_lbl">MINUTES</dt><dd id="minutes">{mnn}</dd><dt id="secs_lbl">SECONDS</dt><dd id="seconds">{snn}</dd></dl>'
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
dl { position:relative; height:80px; margin:20px auto 20px; width:810px; height:150px; background:url('../img/calander-back.png') repeat-x; font-size:1.5em; color:#fff; }
dt { position:absolute; top:10px; left:0; width:135px; text-align:center; padding-top:15px;  font-family: built; font-size:30px;}
dd {  position:absolute; top:50px; left:0; font-size:2.2em; text-align:center; width:135px; }
dt#years_lbl, dd#years { left:0; }
dt#months_lbl, dd#months { left:135px; }
dd#days { left:270px; }
dd#hours { left:405px;  }
dt#mins_lbl, dd#minutes { left:540px; }
dt#secs_lbl, dd#seconds { left:675px; }
#dl * { text-outline: 1px 1px #000; }
 
dt#days_lbl {left:290px;}
dt#hrs_lbl {left:415px;}
0
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
05.07.2016, 03:03 7
Лучший ответ Сообщение было отмечено androidos как решение

Решение

Все мы когда-то видели эти теги впервые.
Вам ничего не мешает использовать дивы вместо них, если так удобней будет. только сохраните исходные имена классов.
HTML5
1
<div class="container"><span id="years_lbl">YEARS</span><span id="years">{ynn}</span></div>
Добавлено через 56 минут
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
.wrapper{
  width:810px;
  margin:0 auto;
  text-align:center;
}
.container{
  display:inline-block;
  font-size:0;
  width:16.5%;
  padding:10px;
  box-sizing: border-box;  
}
span{
  font-size:26px;
  display:block;    
}
 
@media (max-width:725px){
  .wrapper{
  width:100%;
  }
  .container{
    width:50%;
  }
}
@media (max-width:320px){
  .wrapper{
  width:100%;
  }
  .container{
    width:100%;
  }
}
HTML5
1
<div class="wrapper"><div class="container"><span>Год</span><span id="years">{ynn}</span></div><div class="container"><span>Месяц</span><span id="months">{onn}</span></div><div class="container"><span>День</span><span id="days">{dnn}</span></div><div class="container"><span>Час</span><span id="hours">{hnn}</span></div><div class="container"><span>Минута</span><span id="minutes">{mnn}</span></div><div class="container"><span>Секунда</span><span id="seconds">{snn}</span></div></div>
Результат
И вот в этих @media, вы и меняете стили под разные размеры экрана.
1
androidos
29 / 27 / 5
Регистрация: 07.07.2011
Сообщений: 775
05.07.2016, 23:09  [ТС] 8
Цитата Сообщение от mrtoxas Посмотреть сообщение
И вот в этих @media, вы и меняете стили под разные размеры экрана.
спсибо вам
0
05.07.2016, 23:09
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.07.2016, 23:09

Как сделать скролл мобильного меню?
Как сделать скролл мобильного меню, чтобы скроллило только меню, а не всю...

Адаптация для мобильного
Добрый вечер дорогие формучане. Первый раз делаю лендинг, использую sp page...

Table и адаптация для мобильного
Дорогие гуру, как нужно прописать CSS что бы на мобильном выходило по одной...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru