Question

我有一个包含以下布局的div（顶部图片）：http://tinypic.com/r/287eu88/8

我正在尝试研究如何将元素移动到调整大小/移动设备上的底部图像中显示的配置，但我无法解决它。

如果有人能指出我的方向是好的，我是初学者，所以我的代码可能不是很好，所以任何指针都会很棒！

谢谢！

“jsFiddle.net的链接必须附带代码” - 我不是针对特定元素，但这里是满足要求的html：

最新项目

 <h3 id="latestDescription">aboutaboutabout</h3>

<div id="latestSub">
     <h4 id="latestSubheading">Insert Project Name</h4>

    <p id="latestSubdescription">Out believe has request not how comfort evident.
        <br>Extremity sweetness difficult behaviour he of.
        <br>With my them if up many.</p>
</div>
<div id="latestIcons">
    <div id="latestOne">
        <img id="latestIcon1" src="http://placehold.it/80" alt ""/>
         <h5 class="latestH5">Design</h5>

        <p class="latestP">Instantly gentleman contained belonging exquisite now direction she ham.</p>
    </div>
    <div id="latestTwo">
        <img id="latestIcon2" src="http://placehold.it/80" alt ""/>tH5">Accuracy & Details</h5>
        <p class="latestP">Its hence ten smile age means. Seven chief sight far point any.</p>
    </div>
    <div id="latestThree">
        <img id="latestIcon3" src="http://placehold.it/80" alt ""/>
         <h5 class="latestH5">Posibilities</h5>

        <p class="latestP">Children me laughing we prospect answered followed.</p>
    </div>
</div>
<div id="latestPhotoDiv">
    <img id="latestphoto" src="http://placehold.it/350" alt />
</div>

Answer 1

有几种可行的方法。您可以根据需要选择

您可以使用媒体查询为不同的屏幕定义不同的样式表。这是目前最常用的方式。
先睹为快：   http://css-tricks.com/css-media-queries/和   https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries



您可以使用视口元标记。
先睹为快：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag



您可以用％（流体响应）设计所有内容，但这部分非常棘手。根据我的经验，我可以说设计一个完整的   以％为单位的网站非常困难。

我建议你学习媒体查询。它非常简单可靠。

Answer 2

您必须查看media queries。

媒体查询为您提供了一种方法，可以将某些CSS属性仅定位到特定的媒体属性（当然包括视口大小，但如果它是打印的，还是黑白的，等等）。

许多人会建议您从移动优先方法开始，也就是说，首先应用移动设备的CSS，最小版本，然后在断点处应用媒体查询作为视口变得更宽，像这样包围你的CSS：

@media (min-width: 480px){
   /* CSS goes here */
}

响应调整大小

2 个答案: