Html 小屏幕笔记本电脑的布局不正确 布局适合24英寸笔记本电脑。。。 当我在11英寸笔记本电脑中看到它时,布局不正确。。。 右栏将分解并向下移动
在下面提供我的代码Html 小屏幕笔记本电脑的布局不正确 布局适合24英寸笔记本电脑。。。 当我在11英寸笔记本电脑中看到它时,布局不正确。。。 右栏将分解并向下移动,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,在下面提供我的代码 <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&g
<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="<a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px; color: grey;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px; color: grey;' >Labels</a>" data-image="http://www.defie.co/designerImages/inventoryControl.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/search.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/yourfiles.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/shareFiles.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/custProfile.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/custQuote.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/salesOrders.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/vendorProfile.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/reports.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/yourfiles.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/admin.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/shipLogistic.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/accReceivable.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/custRMA.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/production.png"></div>
<div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" 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>
主菜单
我正在开发一个应用程序,它必须在计算机屏幕、笔记本电脑屏幕和移动屏幕上工作。最好的办法是将您的大小从像素更改为百分比。使用百分比,它按屏幕的百分比调整大小,使用像素,它只计算像素,因此,如果屏幕较小,则像素的总大小较小,因此您正在努力调整元素的大小
请这样看,例如:
像素:
900像素屏幕中的400像素等于400像素(剩余500像素)
1200像素的400像素屏幕等于400像素(剩余800像素)
百分比:
800像素屏幕的25%是200像素(正好是屏幕的四分之一)
1200像素屏幕的25%是300像素(正好是屏幕的四分之一)
希望你能理解:p>我会考虑用这样的布局做一些反应。无论是使用插件还是响应框架。@js.js我要说的是将像素更改为相应的百分比,你都必须胡乱处理,直到你得到你想要的,你的小提琴里有太多的代码。但只需将像素更改为相关百分比,如18px更改为2%。你必须把它弄得一团糟,这样当使用百分比rathr比像素时,你可以得到相同的宽度和高度