Question

我有CSS脚本，可连续显示4张图像。

以下是在桌面视图下显示的结果：

但是，当我切换到移动设备时，会得到以下结果：

我如何设置它，以便它将在移动设备上连续显示3张图像？像这样：

我尝试更改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

Answer 1

您可以使用CSS媒体查询来区分台式机和移动设备。这将允许您根据设备提供不同的CSS规则集。在您的情况下，一组规则会将每个图像定义为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%:
  }
}

我不想为您编写代码-因为媒体查询在响应式Web设计中非常重要，如果您花一点时间来学习它们，它将使您受益匪浅-它们非常简单。

我设置的像素限制称为“断点”，它们会根据移动设备的大小而变化，但是有些标准通常会起作用。在线有表格可以弄清楚它们。

这是一篇有关媒体查询的好文章：

https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/

这是另一个具有断点/设备表的好资源：

https://mediag.com/blog/popular-screen-resolutions-designing-for-all/

奖金提示：

我将停止使用绝对像素大小值。有不同的相对单位值，例如vw / vh（window-width / 100，window-height / 100），％（container width OR height / 100）以及em和rem，它们对于响应式设计（支持更多显示）更加灵活和有用。。

Answer 2

@ 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>

Answer 3

img src ..是备用浏览器，以防浏览器不支持图片标签：

<picture>
   <source 
      media="(min-width: 650px)"
      srcset="images/img1.png">
   <source 
      media="(min-width: 465px)"
      srcset="images/img2.png">
   <img src="images/img-default.png" 
   alt="a cute kitten">
</picture>

如何在移动和桌面设备上连续显示不同的图像

3 个答案: