代码之家 › 专栏 › 技术社区 › StackBuck

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

responsive-design css html

StackBuck · 技术社区 · 6 年前

我有一个连续显示4个图像的CSS脚本。

以下是桌面上的结果视图:

但是,当我切换到Mobile时,会得到以下结果:

如何设置它,以便在移动设备上连续显示3个图像?像这样:

我试着改变 position 以及 overflow 设置,但我得到的是相同的结果-它不断拖动第四方底部的移动视图。

下面是一些代码:

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 回复 | 直到 6 年前

Asiya Fatima 6 年前

@stackbuck`try this code,use media queries and add viewport to your code here is my codepen link

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>

aviya.developer 6 年前

您可以使用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%:
  }
}

我不想为你编写代码-因为媒体查询在响应式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(窗口宽度/100,窗口高度/100)、%(容器宽度或高度/100)和em和rem等不同的相对单位值对支持更多显示的响应式设计更为灵活和有用。