Как отображать разные изображения подряд на мобильных и настольных устройствах - PullRequest
Новая
       6

Как отображать разные изображения подряд на мобильных и настольных устройствах

0 голосов
/ 23 января 2019

У меня есть скрипт CSS, который отображает 4 изображения подряд.

Вот результаты на рабочем столе:

4 images in a row

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

3 images in a row

Как мне установить его, чтобы он отображал 3 изображения подряд на мобильном телефоне? Вот так:

3 images in a row- correctly

Я пытаюсь изменить настройки position и overflow, но все, что я получаю, это один и тот же результат - он продолжает перетаскивать 4-й квадрат вниз при мобильном просмотре.

Вот код:

HTML: 

<div><center>
<ul>
        <li>
            <label for="futurebox08"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
        </li>
         <li>
            <label for="futurebox09"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
        </li>
         <li>
            <label for="futurebox10"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png"  /></a></label>
        </li>
<li>
            <label for="futurebox11"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
        </li>
    </ul>

 <ul>
        <li>
            <label for="futurebox08"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
        </li>
         <li>
            <label for="futurebox09"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
        </li>
         <li>
            <label for="futurebox10"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png"  /></a></label>
        </li>
<li>
            <label for="futurebox11"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
        </li>
    </ul> 
  </center></div>

CSS: 

body{
  margin: 0;
  overflow: hidden; 
  background: black
}

img {
  background-color:white;
  width:150px;
  height: 150px;}

div {
  position: absolute;
  left: 0;
  right: 0;
  top: 10%;
}

ul li
    {
  display: inline-block;
  list-style: none;
  margin: 0 25px 0 0;
  border: 5px solid #ccc;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
    }

 ul li:hover {  
  -moz-box-shadow: 0 0 8px 8px #3aaaf1;
   -webkit-box-shadow: 0 0 8px 8px#3aaaf1;
   box-shadow: 0 0 8px 8px #3aaaf1; }

  ul li img, ul li label 
        { 
   display: block; 
   cursor: pointer; 
        }

Вот живой: Codepen

Ответы [ 2 ]

0 голосов
/ 23 января 2019

@ StackBuck` попробуйте этот код, используйте медиазапросы и добавьте viewPort к вашему коду, вот моя ссылка для кодов

https://codepen.io/asiyafatima_12/pen/EraONN

body{
  margin: 0;
  overflow: hidden; 
  background: black
}
img {background-color:white;
  width:150px;
height: 150px;}

div {
  position: absolute;
  left: 0;
right: 0;
  top: 10%;
}

	ul li
	{
		display: inline-block;
		list-style: none;
		margin: 0 25px 0 0;
		border: 5px solid #ccc;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
		ul li:hover { 	-moz-box-shadow: 0 0 8px 8px #3aaaf1;
    -webkit-box-shadow: 0 0 8px 8px#3aaaf1;
    box-shadow: 0 0 8px 8px #3aaaf1; }
	
		ul li img, ul li label 
		{ 
			display: block; 
			cursor: pointer; 
		}

ul {
    width: 100%;
    max-width: 800px;
}

@media only screen and (max-width: 768px){
  ul {  max-width: 700px; }
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">// add viewport to your code

<div><center>
<ul>
        <li>
			<label for="futurebox08"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
		</li>
         <li>
			<label for="futurebox09"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
		</li>
         <li>
			<label for="futurebox10"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png"  /></a></label>
		</li>
<li>
			<label for="futurebox11"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
		</li>
<!-- 	</ul> -->
 
<!--  <ul> -->
        <li>
			<label for="futurebox08"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
		</li>
         <li>
			<label for="futurebox09"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
		</li>
         <li>
			<label for="futurebox10"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png"  /></a></label>
		</li>
<li>
			<label for="futurebox11"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
		</li>
	</ul> 
  </center></div>
0 голосов
/ 23 января 2019

Вы можете использовать медиазапросы CSS, чтобы различать настольные и мобильные устройства.Это позволит вам предоставить другой набор правил CSS в зависимости от устройства.В вашем случае 1 набор правил будет определять каждое изображение как 1/3 ширины окна, а другое - как 1/4 ширины окна, чтобы позволить им выравниваться в ряд в соответствии с вашими заявленными требованиями.

Здесьупрощенный пример: 

/* Mobile */
@media only screen and (max-width: 480px) {
  img {
    max-width: 30%:
  }
}

/* Dekstop */
@media only screen and (min-width: 481px) {
  img {
    max-width: 25%:
  }
}

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

Ограничение в пикселях, которое я установил, называется «точками останова», и они меняются в зависимости от настроек мобильных устройств, но есть определенные стандарты, которые обычно работают.В Интернете есть таблицы для их определения.

Вот хорошая статья о медиа-запросах:

А вот еще однахороший ресурс с таблицами точек останова / устройств:

Бонусный совет:

Я бы перестал работать со значениями абсолютного размера в пикселях.Существуют различные относительные значения единиц измерения, такие как vw / vh (ширина окна / 100, высота окна / 100),% (ширина контейнера или высота / 100) и em и rem, которые являются более гибкими и полезными для адаптивного дизайна, который поддерживает больше отображения,

...