堆疊的div水平/垂直基於設備/屏幕尺寸

我已經遇到這個問題，其中我有分割如下： enter image description here 堆疊的div水平/垂直基於設備/屏幕尺寸

這基本上是一個大問題的一小部分，並通過了解如何我正在計劃解決更大的問題。

如可以在上述圖像中可以看出我有兩個較小的部分，其中的每一個佔據較大的一個的高度的一半。但是，在平板電腦中，我希望它們並排。

這可以通過使用Bootstrap或其他框架輕鬆解決，但是我提出這個問題的動機是理解如何從頭開始完成這項工作的基本原理，更重要的是理解核心概念。

我在它一去，這是我嘗試JSFiddle

這裏是代碼，我想出了：

<div class="container"> 
<div class="largeImage"> 
    <img src="http://lorempixel.com/745/292/sports/" alt="large"> 
</div> 

<div class="smallImages"> 
    <img src="http://lorempixel.com/214/145/sports/" alt="large"> 
    <img src="http://lorempixel.com/214/145/sports/" alt="large"> 
</div> 

.largeImage{ 
    max-width:740px; 
    height:auto; 
    width:100%; 
    display:inline-block; 
    clear:both; 
} 

.largeImage img{ 
    width:100%; 
} 

.smallImages{ 
    background-color:lightgray; 
    display:inline-block; 
    max-width:210px; 
} 
.smallImages img{ 
    width:100%; 
    height:auto; 
} 
.container{ 
    background-color:whitesmoke ; 
    max-width:960px; 
    width:auto; 
    margin:0 auto; 
} 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

    body{ 
    background-color:green; 
    } 

    .smallImages{ 
    width:100%; 

    } 

    .smallImages img{ 
    display:inline-block; 
    float:left; 
    clear:both; 
    } 
    .largeImage{ 
    min-width:100% !important; 
    } 
}

我不知道我是不是過於複雜的事情。但我希望有人能在這裏爲我澄清一下。

陳述我的問題：如何堆疊上述圖像中描述的分區，而不使用任何框架，以及需要在我的嘗試中糾正哪些問題？

來源

2014-03-19 md1hunox

媒體查詢爲你的CSS這樣你就可以根據屏幕尺寸 – Pete

定位您的元素[下面是一個簡單的例子做你想要什麼（http://jsfiddle.net/p5L2F/） – Pete

這個怎麼樣：http://jsfiddle.net/josephspens/pNVFw/

HTML

<div class="container"> 
    <img src="http://lorempixel.com/745/365/sports/" alt="large"/> 
    <img src="http://lorempixel.com/214/145/sports/" alt="large"/> 
    <img src="http://lorempixel.com/214/145/sports/" alt="large"/> 
</div>

CSS

img { 
    width: 100%; 
    float: left; 
    display: block; 
    margin-bottom: 1em; 
} 

@media screen and (min-width: 20em) and (max-width: 30em) { 
    img { 
     width: calc(50% - 0.5em); 
    } 
    img:first-child { 
     width: 100%; 
    } 
    img:nth-of-type(2n+2) { 
     margin-right: 1em; 
    } 
} 

@media screen and (min-width: 30em) { 
    img { 
     width: 25%; 
    } 
    img:first-of-type { 
     width: calc(75% - 1em); 
     margin-right: 1em; 
    } 
}

個

來源

2014-03-19 16:01:34

這正是我怎麼想它work.Any你爲什麼使用'em'而不是像素的具體原因？ – md1hunox

埃姆斯是縮放更好，用一個簡單的改變字體大小可以縮放整個頁面或整個部件，而不僅僅是文字大小。此外大多數的你不是個位數像素的工作，像填充和保證金，你在更大的單位工作，所以時間爲什麼不把它放在自己更容易，說1EM VS 16像素或什麼的。使數學很容易。 http://css-tricks.com/why-ems/ –

此外，如果這是正確的答案，請標記爲接受的答案。 –

的屏幕尺寸可以修改，但這裏是你如何能做到這一個基本的例子： http://jsfiddle.net/4cucC/1/

@media only screen and (max-width: 768px) { 
    .smallImages{ 
     max-width:100%; 
    } 
    .smallImages img{ 
     max-width: 210px; 
    } 
}

來源

2014-03-19 15:59:30 apohl

堆疊的div水平/垂直基於設備/屏幕尺寸

回答

相關問題