布局不适合小屏幕笔记本电脑

Question

• 24英寸笔记本电脑的布局很好...... 当我在11英寸笔记本电脑中看到它时布局不合适... 右栏分解并向下移动....

http://jsfiddle.net/ZrpLT/92/embedded/result/

在下面提供我的代码

<div class="row" style="margin-left: 325px;">
    <div class="span12 pagination-centered" style="font-style: arial; font-size: 21px; color: #cc0000; margin-bottom: 20px; padding-top: 113px;">
            Main Menu
    </div>
    <div class="span5" style="margin-left: 97px; width: 493px;">
        <div class="melonhtml5_gallery">
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/inventoryControl.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/search.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/yourfiles.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/shareFiles.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/custProfile.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/custQuote.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/salesOrders.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/vendorProfile.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/reports.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/yourfiles.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/admin.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/shipLogistic.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/accReceivable.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/custRMA.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/production.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/CRM.png"></div>
        </div>
    </div>
    <div class="span5" style="margin-left: 65px; width: 493px;">
        <div class="melonhtml5_gallery">
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/accPayable.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/vendorRMA.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/manuPlanning.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/productLifeCycle.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/multiMedia.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/receiving.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/tax.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/admin.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/ISOprocess.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/intergration.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/comDocuments.png"></div>
            <div data-caption="" data-image="/images/cubes/TBU4.png"></div>
            <div data-caption="" data-image="/images/cubes/TBU5.png"></div>
            <div data-caption="" data-image="/images/cubes/TBU5.png"></div>
            <div data-caption="" data-image="/images/cubes/TBU5.png"></div>
            <div data-caption="" data-image="/images/cubes/TBU5.png"></div>
    </div>
</div>

Answer 1

我正在开发一个应用程序，它必须在计算机屏幕，笔记本电脑屏幕和移动屏幕上工作。最好的办法是将像素的大小从像素改为百分比。使用百分比，它按屏幕的百分比调整大小，像素只计算像素，因此如果屏幕较小，则像素的总大小较小，因此您正在努力调整元素大小

以这种方式看待它：例如：

<强>像素：

400像素的900像素屏幕等于400像素（剩余500像素）

400像素的1200像素屏幕等于400像素（剩余800像素）

<强>百分率：

800像素屏幕的25％是200像素（恰好是屏幕的四分之一）

1200像素屏幕的25％是300像素（恰好是屏幕的四分之一）

希望你明白：）

Answer 2

我考虑使用这样的布局做一些响应。通过使用masonry之类的插件或像foundations这样的响应式框架。