使用布局转换的响应式网页设计

我是新的响应式网页设计。我想要的输出是div标签其中包含深蓝色，浅蓝色，绿色，红色应显示在堆叠顺序中，当屏幕宽度小于500像素，即像这个图像media query less than 500px。使用布局转换的响应式网页设计

当屏幕宽度大于500px时，它应该显示为与代码段输出相同，但第一个显示器像这样显示wrongly displayed for screen < 500px。

第一个可以通过最小化浏览器获得。我使用的html和css is.pls说明了为什么它不能用淡蓝色和绿色来显示。

.container{ 
 

 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 

 
.box{ 
 
    width:100%; 
 
    min-height: 150px; 
 
} 
 

 
.dark-blue { 
 
    background-color: blue; 
 
    } 
 
.light-blue { 
 
    background-color: skyblue; 
 
} 
 
.green { 
 
    background-color: #0C8542; 
 
} 
 
.red { 
 
    background-color: #EC1D3B; 
 
} 
 

 
@media screen and (min-width:500px) 
 
{ 
 
#container2 
 
{ 
 
    width:50%; 
 
} 
 
.dark-blue 
 
{ 
 
    width:50%; 
 
} 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Layout Shift</title> 
 
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 
 
<link type="text/css" rel="stylesheet" href="main.css"> 
 
</body> 
 
<div class="container"> 
 
    <div class="box dark-blue"></div> 
 
<div class="container" id="container2"> 
 
     <div class="box light-blue"></div> 
 
     <div class="box green"></div> 
 
     </div> 
 
    <div class="box red"></div> 
 
</div> 
 
</body> 
 
</html>

。

来源

2016-10-30 Arul

如果通过.box.dark蓝色的CSS取代.dark蓝色，会发生什么？ – mm759

这是怎么回事？ http://codepen.io/panchroma/pen/NRZMZR

HTML没有改变，在CSS中我在@media查询中移动了.container样式。更改的最终结果是，在视口宽度小于500像素的情况下，.container显示为block，并且每个div均为全宽。

希望这会有所帮助！

CSS

.box{ 
    width:100%; 
    min-height: 150px; 
} 

.dark-blue { 
    background-color: blue; 
    } 
.light-blue { 
    background-color: skyblue; 
} 
.green { 
    background-color: #0C8542; 
} 
.red { 
    background-color: #EC1D3B; 
} 

@media screen and (min-width:500px){ 
    .container{ 
    display:flex; 
    flex-wrap:wrap; 
    } 

    #container2{ 
    width:50%; 
    } 
    .dark-blue{ 
    width:50%; 
    } 
}

来源

2016-10-30 23:54:31

使用布局转换的响应式网页设计

回答

相关问题