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


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


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

#21 Cybernetic

Cybernetic

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

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

Отправлено 06 Август 2014 - 07:27

Подскажите пожалуйста что делать с адаптивностью на разрешении 1024x768 ?
Вся шапка съезжает.

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

  • glopster.jpg


#22 Vaccina

Vaccina

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

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

Отправлено 06 Август 2014 - 23:02

Слайдер на данный момент присутствует.
#module_area {
}
замените на:
.header_top {
	clear: none;
	float: left;
	width: 60%;
	margin: 10px 0;
}

далее найдите:
#module_area {
	float: left;
	height: 141px;
	margin-left: 60px;
	padding: 5px 0;
	position: relative;
	text-align: center;
	width: 570px;
	z-index: 99999;
}
замените на:
#module_area {
	float: left;
	height: 182px;
	margin-left: 60px;
	padding: 5px 0;
	position: relative;
	text-align: center;
	width: 570px;
	z-index: 99;
}
далее найдите:
#header #cart {
	float: right;
	min-width: 300px;
	position: relative;
	right: 20px;
	top: 20px;
	z-index: 20;
}
замените на:
#header #cart {
	float: right;
	margin: 20px 20px 0 0;
	min-width: 300px;
	position: relative;
	z-index: 20;
}
.header_top{
clear:both;
}

в самом шаблоне HTML попробуйте найти
<div class="clear"></div>
перед:
<div class="header_top">
и после данного блока и удалить их

#23 Cybernetic

Cybernetic

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

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

Отправлено 07 Август 2014 - 06:23

Vaccina к сожалению Ваши инструкции не меняют в целом картины(хотелось бы что бы на разрешении 1024x768 была просто уменьшенная копия шапки сайта без разьезжания)

То как сейчас отображается  сайт на картинке в низу.

#24 Vaccina

Vaccina

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

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

Отправлено 07 Август 2014 - 22:58

В браузере Mozilla Firefox в инструментах имеется проверка адаптивности сайта на разных разрешениях, она точнее и удобней.
Скриншота в последнем посте у вас не обнаруживаю, по инструкции выше, меню с поиском у вас должны переместиться влево от контактов(ранее они были у вас под контактами), возможно я неправильно вас поняла, укажите пожалуйста желаемое отображение при данном разрешении

#25 Cybernetic

Cybernetic

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

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

Отправлено 08 Август 2014 - 06:35

Vaccina вы писали -
Скриншота в последнем посте у вас не обнаруживаю, по инструкции выше, меню с поиском у вас должны переместиться влево от контактов(ранее они были у вас под контактами), возможно я неправильно вас поняла, укажите пожалуйста желаемое отображение при данном разрешении"


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

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

  • omg1.jpg


#26 Vaccina

Vaccina

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

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

Отправлено 08 Август 2014 - 23:40

так а как вы представляете уменьшение пунктов меню, чтобы при уменьшении разрешения, все оставалось на своих местах?
Можно как вариант уменьшать баннер, в этом случае отмените последние изменения по перемещению меню и поиска и вместо замененных кодов вставьте:
.flexslider .slides img {
	display: block;
	height: auto;
	width: 100%;
}
.flexslider {
	width: 50%;
}
в этом случае все блоки должны сохранить положение, а слайдер уменьшиться

#27 Cybernetic

Cybernetic

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

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

Отправлено 11 Август 2014 - 06:11

Vaccina

.flexslider .slides img {
        display: block;
        height: auto;
        width: 100%;
}
.flexslider {
        width: 50%;
}

Уточните пожалуйста куда вставлять вышеописанное в main.css но пред чем или над чем(строки)?

#28 Cybernetic

Cybernetic

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

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

Отправлено 11 Август 2014 - 12:02

Добрый день.
Подскажите пожалуйста как сделать вид(сайта) для Internet Explorer таким же как и в firefox
т.е. с сохранением адаптивности в общем отзеркалить отображение в firefox на Internet Explorer
Подробнее на картинках внизу.

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

  • osel2.jpg
  • osel1.jpg


#29 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 11 Август 2014 - 12:38

Просмотр сообщенияCybernetic (11 Август 2014 - 12:02) писал:

Добрый день.
Подскажите пожалуйста как сделать вид(сайта) для Internet Explorer таким же как и в firefox
т.е. с сохранением адаптивности в общем отзеркалить отображение в firefox на Internet Explorer
Подробнее на картинках внизу.

Для начала из шаблоне HTML удалите код:
	<meta http-equiv="X-UA-Compatible" content="IE=7" />


#30 Cybernetic

Cybernetic

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

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

Отправлено 13 Август 2014 - 06:43

Доброго времени суток.
Подскажите как  сделать нормальную адаптивность для разрешения 1024x768 ?
То есть что бы шапка сайта видоизменялась с разрешения 1222x"любое число" - просто пропорции баннеров и текста в шапке сайта пропорционально уменьшались не сдвигаясь и не съезжая.

Почему-то сайт отображается нормально(без искажений и сохранением адаптивности) только на разрешении 1222x"любое число"
сайт - http://santechbomba.ru/
подробнее  что хотелось бы на картинках

PS: Вот уже 2 недели пытаюсь добиться помощи на форуме в этой проблеме, пожалуйста помогите.

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

  • size1.jpg
  • size2.jpg


#31 Alekseys

Alekseys

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

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

Отправлено 13 Август 2014 - 09:58

Здравствуйте. Если Вас устроит такой вариант, сделайте следующее:
зайдите в Сайт -> Редактор шаблонов -> main.css и замените
#module_area {
	 float: left;
	 height: 182px;
	 margin-left: 60px;
	 padding: 5px 0;
	 position: relative;
	 text-align: center;
	 width: 570px;
	 z-index: 99;
}
на
#module_area {
float: left;
height: 182px;
padding: 5px 0;
position: relative;
text-align: center;
width: 50%;
z-index: 99;
}
далее
#header #cart {
float: right;
margin: 0px 20px 0 0;
min-width: 300px;
position: relative;
z-index: 20;
}
замените на
#header #cart {
float: right;
position: relative;
z-index: 20;
width: 226px;
}
после чего
.styled-select {
width: 203px;
height: 48px;
overflow: hidden;
background: url(http://st.santechbomba.ru/7/1270/498/strelka.png) no-repeat left;
color: white;
padding-left: 19px;
margin: 0 auto;
margin: 0 0 0 80px;
}
поменяйте на
.styled-select {
width: 203px;
height: 48px;
overflow: hidden;
background: url(http://st.santechbomba.ru/7/1270/498/strelka.png) no-repeat left;
color: white;
padding-left: 19px;
margin: 0;
}
затем
#tel-change {
font-family: Arial;
margin: 15px 0 4px 76px;
}
на
#tel-change {
font-family: Arial;
margin: 15px 0 4px 0px;
}
а блок
.time {
width: 180px;
height: 29px;
color: white;
font-style: italic;
font-size: 32px;
/* margin-left: 97px; */
overflow: hidden;
margin: 5px 0 0px 122px;
padding: 3px 1px 0 0;
}
на
.time {
width: 180px;
height: 29px;
color: white;
font-style: italic;
font-size: 32px;
/* margin-left: 97px; */
overflow: hidden;
margin: 5px 0 0px 48px;
padding: 3px 1px 0 0;
}


#32 Cybernetic

Cybernetic

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

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

Отправлено 13 Август 2014 - 11:14

Alekseys спасибо Вам большое за помощь, не могли бы вы помочь еще немного, а именно:

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

Более подробнее что бы хотелось на картинках внизу

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

  • size4.jpg
  • size3.jpg


#33 Alekseys

Alekseys

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

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

Отправлено 13 Август 2014 - 11:40

Просмотр сообщенияCybernetic (13 Август 2014 - 11:14) писал:

Alekseys спасибо Вам большое за помощь, не могли бы вы помочь еще немного, а именно:

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

Более подробнее что бы хотелось на картинках внизу
По поводу баннера в HTML замените
<div id="module_area">
		 <a href="http://santechbomba.ru/page/stock">
		 <div id="flexslideshow" class="flexslider">
			 <ul class="slides">
			 <li>
			
				 <div class="bigPic" style="width: 572px; height: 182px; background:url({ASSETS_IMAGES_PATH}2a.png) no-repeat;" ></div>
				
				 <img src="{ASSETS_IMAGES_PATH}2a.png" alt="Slide 1" class="slide_img">
			 </li>
			 <li>
				 <div class="bigPic" style="width: 572px; height: 182px; background:url({ASSETS_IMAGES_PATH}2a1.png) no-repeat;"></div>
				 <img src="{ASSETS_IMAGES_PATH}2a1.png" alt="Slide 2" class="slide_img">
			 </li>
			 <li>
				 <div class="bigPic" style="width: 572px; height: 182px; background:url({ASSETS_IMAGES_PATH}2a3.png) no-repeat;"></div>
				 <img src="{ASSETS_IMAGES_PATH}2a3.png" alt="Slide 3" class="slide_img">
			 </li>
			 </ul>
		 </a></div>
		 </div>
на
<div id="module_area">
		 <a href="http://santechbomba.ru/page/stock">
		 <div id="flexslideshow" class="flexslider">
			 <ul class="slides">
			 <li>
			
				 <div class="bigPic" style="background-size: 100%; height: 190px; background:url({ASSETS_IMAGES_PATH}2a.png) no-repeat;" ></div>
				
				 <img src="{ASSETS_IMAGES_PATH}2a.png" alt="Slide 1" class="slide_img">
			 </li>
			 <li>
				 <div class="bigPic" style="background-size: 100%; height: 190px; background:url({ASSETS_IMAGES_PATH}2a1.png) no-repeat;"></div>
				 <img src="{ASSETS_IMAGES_PATH}2a1.png" alt="Slide 2" class="slide_img">
			 </li>
			 <li>
				 <div class="bigPic" style="background-size: 100%; height: 190px; background:url({ASSETS_IMAGES_PATH}2a3.png) no-repeat;"></div>
				 <img src="{ASSETS_IMAGES_PATH}2a3.png" alt="Slide 3" class="slide_img">
			 </li>
			 </ul>
		 </a></div>
		 </div>
По поводу кнопок и поиска - уточните пожалуйста на скриншоте, как Вы желаете, чтоб они были расположены?

#34 Cybernetic

Cybernetic

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

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

Отправлено 13 Август 2014 - 12:01

Alekseys по поводу кнопок и поиска, хотелось бы, что бы, всё было в строчку, как в разрешении большем чем 1024x

http://santechbomba.ru/
Кнопки поиска как на картинке внизу

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

  • size5.jpg


#35 Alekseys

Alekseys

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

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

Отправлено 13 Август 2014 - 12:28

В main.css замените
@media only screen and (max-width: 1024px) {
.header_top {
		clear: none;
		float: left;
		width: 60%;
		margin: 10px 0;
}
на
@media only screen and (max-width: 1024px) {
.header_top {
		clear: none;
		float: left;
		width: 100%;
		margin: 10px 0;
}
затем
#header #search {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
float: right;
margin: -10px 10px 10px 0;
position: relative;
vertical-align: middle;
width: 260px;
}
замените на
#header #search {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
float: right;
margin: -10px 10px 10px 0;
position: relative;
vertical-align: middle;
width: 220px;
}
и
#header #search input {
background: none repeat scroll 0 0 #fff;
color: #ccc;
height: 21px;
margin-right: 5px;
padding: 5px;
width: 215px;
}
поменяйте на
#header #search input {
background: none repeat scroll 0 0 #fff;
color: #ccc;
height: 21px;
margin-right: 5px;
padding: 5px;
width: 175px;
}


#36 Cybernetic

Cybernetic

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

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

Отправлено 14 Август 2014 - 08:46

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

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

  • slide1.jpg
  • slide.jpg


#37 Vaccina

Vaccina

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

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

Отправлено 14 Август 2014 - 23:00

попробуйте в шаблоне html перенести сам блок поиска:
<div id="search">
			  <form id="search_mini_form" class='button'action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Умный поиск ...') return false;">
				<button title="Искать" type="submit" value="Поиск" class="button-search"></button>
				<input type="text" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Умный поиск ......{% ENDIF %}" onfocus="if(this.value=='Умный поиск ......'){this.value='';}" onblur="if(this.value==''){this.value='Умный поиск ......';}" onclick="this.value = &#39;&#39;;" onkeydown="this.style.color = &#39;#000000&#39;;"/>
			  </form>
			</div>
			<!-- /Форма поиска -->
поставив его после:
		<img src="{ASSETS_IMAGES_PATH}2a3.png" alt="Slide 3" class="slide_img">
						 </li>
						 </ul>
				 </a></div>

далее в main.css найдите:
#header #search {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	float: right;
	margin: -10px 10px 10px 0;
	position: relative;
	vertical-align: middle;
	width: 220px;
}
замените на:
#header #search {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	float: left;
	margin: 0;
	position: relative;
	vertical-align: middle;
	width: 220px;
}

далее найдите:
#module_area {
	float: left;
	height: 182px;
	padding: 5px 0;
	position: relative;
	text-align: center;
	width: 50%;
	z-index: 99;
}
замените на:
#module_area {
	float: left;
	height: 182px;
	padding: 5px 0;
	position: relative;
	text-align: center;
	width: 50%;
	z-index: 99;
}


#38 Cybernetic

Cybernetic

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

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

Отправлено 15 Август 2014 - 06:34

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

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

  • donot.jpg
  • slide1.jpg
  • size2.jpg
  • s3.jpg


#39 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 15 Август 2014 - 07:09

Просмотр сообщенияCybernetic (15 Август 2014 - 06:34) писал:

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

В main.css найдите код:
@media all and (min-width: 990px) {
  #header  .flexslider li img.slide_img{display:none !important;}
  #header  .flexslider li .bigPic {display:block !important;}
  #header.borderless {border-bottom:none;}
}

и замените на:
@media all and (min-width: 990px) {
  #header  .flexslider li img.slide_img{display:block !important;}
  #header  .flexslider li .bigPic {display:none !important;}
  #header.borderless {border-bottom:none;}
}

Слайдер должен перестать обрезаться. По поводу поиска - сделать не получится, т.к. сайт адаптивный и в зависимости от разрешения блоки будут двигаться относительно друг друга. По поводу уменьшения шапки, Вы хотите чтобы вместо перемещения блоков уменьшался их шрифт?

#40 Cybernetic

Cybernetic

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

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

Отправлено 15 Август 2014 - 07:57

MikDark спасибо за ваши инструкции, помогло, картинки в баннере не обрезаются.

Вы писали - "сайт адаптивный и в зависимости от разрешения блоки будут двигаться относительно друг друга."
Пусть двигаются только с уменьшением разрешения пропорционально уменьшаются, т.е. я хочу что бы шапка сайта была ТОЧНО такой же как и сейчас(при высоком разрешении)
и при уменьшении разрешения блоки уменьшались так же не наваливаясь друг на друга и не вытесняя вплоть до мобильного разрешения(до 650x) при достижении разрешения 650 действуют иные настройки(они сейчас и действуют) .

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

  • size2.jpg





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

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