Перейти к содержимому


Как Сделать Адаптивность Для Разных Разрешений

Автор Ser, 25 апр. 2014 08:27

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 83

#61 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 25 Октябрь 2014 - 01:20

В main.css найдите:
.ll .box {
	float: left;
	margin-left: 79px;
	width: 190px;
}
замените на:
.ll .box {
	float: left;
	margin-left: 2%;
	width: 18%;
}

#62 boktar

boktar

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 200 сообщений

Отправлено 25 Октябрь 2014 - 03:09

Просмотр сообщенияVaccina (25 Октябрь 2014 - 01:20) писал:

В main.css найдите:
.ll .box {
float: left;
margin-left: 79px;
width: 190px;
}
замените на:
.ll .box {
float: left;
margin-left: 2%;
width: 18%;
}
Спасибо, получилось.

#63 boktar

boktar

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 200 сообщений

Отправлено 25 Октябрь 2014 - 03:19

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

#64 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 25 Октябрь 2014 - 03:31 

.ll .box {
float: left;
margin-left: 2%;
width: 18%;
}
замените на:
.ll .box {
	float: left;
	width: 210px;
}

далее найдите:
#module_area {
	float: right;
	padding: 5px 0;
	text-align: center;
	width: 75%;
}
замените на:
#module_area {
	margin-left: 235px;
	padding: 5px 0;
	position: relative;
	text-align: center;
}

далее в HTML найдите:
<div class="ll" style="width:1200; margin:0 auto">
		 <!-- Главная страница -->
		 {% IF index_page %}
				 <div id="module_area">
				 <div id="flexslideshow" class="flexslider">
						 <ul class="slides">
						 <li>
								 <div class="bigPic" style="width: 1920px; height: 307px; background:url({ASSETS_IMAGES_PATH}1.png) no-repeat;"></div>
								 <img src="{ASSETS_IMAGES_PATH}1.png" alt="Slide 1" class="slide_img">
						 </li>
						 <li>
								 <div class="bigPic" style="width: 1920px; height: 307px; background:url({ASSETS_IMAGES_PATH}3.png) no-repeat;"></div>
								 <img src="{ASSETS_IMAGES_PATH}3.png" alt="Slide 2" class="slide_img">
						 </li>
						 <li>
								 <div class="bigPic" style="width: 1920px; height: 307px; background:url({ASSETS_IMAGES_PATH}4.png) no-repeat;"></div>
								 <img src="{ASSETS_IMAGES_PATH}4.png" alt="Slide 3" class="slide_img">
						 </li>
						  <li>
								 <div class="bigPic" style="width: 1920px; height: 307px; background:url({ASSETS_IMAGES_PATH}5.png) no-repeat;"></div>
								 <img src="{ASSETS_IMAGES_PATH}5.png" alt="Slide 3" class="slide_img">
						 </li>
						  <li>
								 <div class="bigPic" style="width: 1920px; height: 307px; background:url({ASSETS_IMAGES_PATH}6.png) no-repeat;"></div>
								 <img src="{ASSETS_IMAGES_PATH}6.png" alt="Slide 3" class="slide_img">
						 </li>
						 </ul>
				 </div>
				 </div>
						 <!-- Каталог товаров -->			  
				 {%IFNOT catalog_full_empty%}
				 <div class="box">
						 <div class="box-heading">Меню</div>
						 <div class="box-content">
						 <div class="box-category">
								 {%FOR catalog_full%}
								 {% IF catalog_full.FIRST %}<ul class="accordion">{% ENDIF %}
								 <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
										 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
								 {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
								 {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
								 {%ENDFOR%}
						 </div>
						 </div>
				 </div>
				 {%ENDIF%}
				 <!-- /Каталог товаров -->
	   
		 {% ENDIF %}
		 <!-- /Главная страница -->
		 </div>
замените на:
<div class="ll inner" style="width:1200; margin:0 auto">
		 <!-- Главная страница -->
		 {% IF index_page %}
			   
						 <!-- Каталог товаров -->			  
				 {%IFNOT catalog_full_empty%}
				 <div class="box">
						 <div class="box-heading">Меню</div>
						 <div class="box-content">
						 <div class="box-category">
								 {%FOR catalog_full%}
								 {% IF catalog_full.FIRST %}<ul class="accordion">{% ENDIF %}
								 <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
										 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
								 {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
								 {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
								 {%ENDFOR%}
						 </div>
						 </div>
				 </div>
				 {%ENDIF%}
				 <!-- /Каталог товаров -->
	
	  <div id="module_area">
				 <div id="flexslideshow" class="flexslider">
						 <ul class="slides">
						 <li>
								 <div class="bigPic" style="width: 1920px; height: 307px; background:url({ASSETS_IMAGES_PATH}1.png) no-repeat;"></div>
								 <img src="{ASSETS_IMAGES_PATH}1.png" alt="Slide 1" class="slide_img">
						 </li>
						 <li>
								 <div class="bigPic" style="width: 1920px; height: 307px; background:url({ASSETS_IMAGES_PATH}3.png) no-repeat;"></div>
								 <img src="{ASSETS_IMAGES_PATH}3.png" alt="Slide 2" class="slide_img">
						 </li>
						 <li>
								 <div class="bigPic" style="width: 1920px; height: 307px; background:url({ASSETS_IMAGES_PATH}4.png) no-repeat;"></div>
								 <img src="{ASSETS_IMAGES_PATH}4.png" alt="Slide 3" class="slide_img">
						 </li>
						  <li>
								 <div class="bigPic" style="width: 1920px; height: 307px; background:url({ASSETS_IMAGES_PATH}5.png) no-repeat;"></div>
								 <img src="{ASSETS_IMAGES_PATH}5.png" alt="Slide 3" class="slide_img">
						 </li>
						  <li>
								 <div class="bigPic" style="width: 1920px; height: 307px; background:url({ASSETS_IMAGES_PATH}6.png) no-repeat;"></div>
								 <img src="{ASSETS_IMAGES_PATH}6.png" alt="Slide 3" class="slide_img">
						 </li>
						 </ul>
				 </div>
				 </div>
	   
		 {% ENDIF %}
		 <!-- /Главная страница -->
		 </div>

#65 boktar

boktar

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 200 сообщений

Отправлено 25 Октябрь 2014 - 13:16

Спасибо!

#66 Cybernetic

Cybernetic

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 014 сообщений

Отправлено 27 Февраль 2015 - 08:41

Доброго времени суток.
Подскажите как сделать на низких разрешениях (таких как 360x640) отображение 3 иконок в меню каталога по горизонтали. (рис)

Прикрепленные изображения

  • 2566.png

#67 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 28 Февраль 2015 - 04:49

Как понимаю, название категорий необходимо убрать при данном разрешении оставив только фото.
В main.css в самый конец шаблона вставьте:
@media only screen and (max-width: 360px) {
div.prod_hold {
  width: 67px;
}
.goods-cat-image-medium-square {
  max-width: 100% !important;
  width: auto;
height: 60px;
}
.goods-cat-image-medium {
  max-width: 100%;
}
.prod_hold .name{display:none;}
}

#68 Cybernetic

Cybernetic

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 014 сообщений

Отправлено 30 Апрель 2015 - 09:04

Добрый день

Очень, нужна помощь в адаптивности дизайна (пока что главная страница http://santechbomba.ru )

Нужно настроить для разрешения 320x568 что бы было как на картинке:

1) Логотип и блок телефонов на одном уровне
2) После логотипа и телефонов идёт блок горизонтального меню во всю длинну (только что бы не накладывались друг на друга а в строчку только маленькие)
3) Далее блок поиск на сайте во всю длину
4) Далее начинается блок каталога (как на картинке уже отображается)

Прикрепленные изображения

  • 1.jpg

#69 Cybernetic

Cybernetic

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 014 сообщений

Отправлено 05 Май 2015 - 07:05

Здравствуйте, всех с наступающими праздниками.

Ответьте пожалуйста на верхний пост.#68

#70 Cybernetic

Cybernetic

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 014 сообщений

Отправлено 14 Май 2015 - 09:23

Добрый день.

Есть ли возможность администраторов форума ответить на мой пост #68

PS: Пишешь пишешь а толку нет, тупо игнорят((( не хорошо. Могли бы как вариант сделать способ при котором твой пост помечался соответствующим флажком, по типу "ваш вопрос рассматривается" ну или хотя бы отписываться что нет пока что решения...в общем какой либо обратный отклик хочется увидеть...а то как будто сам себе пишешъ !!!!!!!!!!!

#71 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 14 Май 2015 - 12:49

Просмотр сообщенияCybernetic (30 Апрель 2015 - 09:04) писал:

Добрый день

Очень, нужна помощь в адаптивности дизайна (пока что главная страница http://santechbomba.ru )

Нужно настроить для разрешения 320x568 что бы было как на картинке:

1) Логотип и блок телефонов на одном уровне
2) После логотипа и телефонов идёт блок горизонтального меню во всю длинну (только что бы не накладывались друг на друга а в строчку только маленькие)
3) Далее блок поиск на сайте во всю длину
4) Далее начинается блок каталога (как на картинке уже отображается)

Добрый день
Изменение шапки, таки образом плохо скажется на работе скрипта, выбора города, этот блок будет очень маленьким.

#72 Cybernetic

Cybernetic

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 014 сообщений

Отправлено 14 Май 2015 - 14:38

Просмотр сообщенияИрина345 (14 Май 2015 - 12:49) писал:

Добрый день
Изменение шапки, таки образом плохо скажется на работе скрипта, выбора города, этот блок будет очень маленьким.

Я вас понял, можете подсказать как убрать блоки (при разрешении 320x) нравится магазин, новости и статьи мы в со сетях, что бы просто вместо этого было горизонтальное меню и поиск

Так же хотелось бы улучшить читабельность для каталога (на главной внизу при разрешении 320x), улучшить путем уменьшения пропорций элементов что бы текст отображался нормально, если же такая реализация не возможна предложите альтернативу.

Прикрепленные изображения

  • 1241242.jpg

#73 Cybernetic

Cybernetic

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 014 сообщений

Отправлено 15 Май 2015 - 13:25

Подскажите как отключить адоптивный дизайн для разрешений <400, хотелоь бы что бы сайт показывался полностью только маленький.

#74 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 15 Май 2015 - 14:11

Просмотр сообщенияCybernetic (15 Май 2015 - 13:25) писал:

Подскажите как отключить адоптивный дизайн для разрешений <400, хотелоь бы что бы сайт показывался полностью только маленький.

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
@media only screen and (max-width: 400px) {
#header #logo {
		clear: both;
		float: none;
		margin: 0 auto;
}
#header #cart {
		clear: both;
		left: 0;
		margin: 0 auto;
		position: relative;
		top: 0;
		text-align: center;
}
.box-category {
display: none;
}
div.tet {
display: none;
}
.time {
		margin: 0 auto;
}
.callme {
		display: none;
}
#header #cart .heading {
		float: none;
		margin: 0 auto 10px;
		padding: 0;
}
#header #cart .heading > a {
		margin: 0 auto;
}
.header_top {
		display: none;
}
}
.table1 .height {
height:238px;
}
.img2 a img{
width:50px;
height:70px;
}

Замените на:
/*@media only screen and (max-width: 400px) {
#header #logo {
		clear: both;
		float: none;
		margin: 0 auto;
}
#header #cart {
		clear: both;
		left: 0;
		margin: 0 auto;
		position: relative;
		top: 0;
		text-align: center;
}
.box-category {
display: none;
}
div.tet {
display: none;
}
.time {
		margin: 0 auto;
}
.callme {
		display: none;
}
#header #cart .heading {
		float: none;
		margin: 0 auto 10px;
		padding: 0;
}
#header #cart .heading > a {
		margin: 0 auto;
}
.header_top {
		display: none;
}
}
.table1 .height {
height:238px;
}
.img2 a img{
width:50px;
height:70px;
}
*/

#75 Cybernetic

Cybernetic

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 014 сообщений

Отправлено 18 Май 2015 - 07:34

Firefly к сожалению абсолютно не то что я хотел (инструкции в коде отменил).

Хочется что бы сайт просто был таким же только меньше без всяких там адаптивок (скриншот)

Прикрепленные изображения

  • asmans.jpg

#76 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 18 Май 2015 - 12:02

Просмотр сообщенияCybernetic (18 Май 2015 - 07:34) писал:

Firefly к сожалению абсолютно не то что я хотел (инструкции в коде отменил).

Хочется что бы сайт просто был таким же только меньше без всяких там адаптивок (скриншот)
Здравствуйте.
В таком случае, вам нужно полностью отключить адаптивность.
В main.css найдите все строки @media и нажмите на галочку, чтобы свернуть список со стилями(см. скриншот).
Screenshot_2.jpg
Далее выделаем и удаляем получившеюся строку (см. скриншот).
Screenshot_3.jpg

#77 Cybernetic

Cybernetic

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 014 сообщений

Отправлено 18 Май 2015 - 12:56

Просмотр сообщенияDanil (18 Май 2015 - 12:02) писал:

Здравствуйте.
В таком случае, вам нужно полностью отключить адаптивность.
В main.css найдите все строки @media и нажмите на галочку, чтобы свернуть список со стилями(см. скриншот).
Прикрепленный файл Screenshot_2.jpg
Далее выделаем и удаляем получившеюся строку (см. скриншот).
Прикрепленный файл Screenshot_3.jpg
Мне не нужно всё удолять, только для разрешения <480/

#78 sergrider

sergrider

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 204 сообщений
  • ГородРостов на Дону

Отправлено 08 Июнь 2015 - 19:47

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

Вот что он выдал.
Не оптимизировано для мобильных устройств
Страница не оптимизирована для мобильных устройств

Слишком мелкий шрифт
Ссылки слишком близко друг к другу
Не задана область просмотра для мобильных устройств
Контент шире экрана

Почему так, дизайн то адаптивный?

Далее написано.

Чтобы сообщить браузеру, что ваша страница адаптируется к любым устройствам, добавьте в заголовок документа такой метатег:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

адаптивный дизайн.jpg

Слева показана страница без метатега viewport. Мобильный браузер принимает ее за страницу для обычных компьютеров и масштабирует по ширине экрана телефона. В результате содержание страницы читается с трудом. Справа показана та же страница с метатегом viewport в котором указывается, что область просмотра равна ширине экрана. В этом случае мобильный браузер не масштабирует страницу, и ее содержание читается легко.

Нужно прописывать этот метатег и куда?

Спасибо.

#79 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 09 Июнь 2015 - 05:28

Дизайн-тема Пластик не адаптирована под мобильные и другие устройства, данный шаблон не адаптивен, адаптивны следующие темы:
- Лазурь
- Хамелеон
- Движение
- Весна
- Нефрит
- Цитрус
- Бистро
- Осень
- Радость
- Шоколад
- Техника
- Вечность
- Снег

Цитата

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Прописывается в шаблоне HTML до тега </head>

#80 sergrider

sergrider

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 204 сообщений
  • ГородРостов на Дону

Отправлено 09 Июнь 2015 - 19:28

Спасибо. Попробую.

Еще вопрос.

До <head> можно или только после?
Обратно в Главная


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Весна
  5. → Главная
  6. Privacy Policy