根據屏幕尺寸調整div

Question

您好，我正在開發一個基於多頁Web的混合移動應用程序。 我在使用div時遇到問題，我需要根據瀏覽器調整div。 那就是當我最小化或減小瀏覽器的大小時，我需要我的div進行同樣的查看，但是當我最小化時，我的下面的代碼使所有元素都位於另一個之上。

 #viep { position:relative; width:100vw; height:100vh; margin:0; padding:0; } #viep1 { position:relative; width:100vw; height:100vh; overflow:auto; margin:0; padding:0; } #placehere { position:absolute; top:5%; left:30%; } #placehere img { border-radius: 50%; max-width:100%; } #my1 { width:100%; position:absolute; top:35%; left:0; } .appButtons { position:absolute; top:80%; left:35%; } 

 <div> <div> ... .. </div> <div id="viep"> <div id="viep1"> <div id="placehere" style="display:none;"> </div> <table class="myt1" id="my1" style="display:none;"> </table> <input type="button" id="buttonid" class="appButtons" value="Reportees"> </div> </div> </div> 

Answer 1

好的，您需要使用<meta name="viewport" content="width=device-width, initial-scale=1" />在html文檔中定義視口。 在您的div的CSS中，嘗試執行width: 100% 。 如果要在頁面上放置一些內容，請在CSS中添加： margin: auto

此外，您可以僅使用Foundation或Bootstrap之類的框架，這將使您的工作變得更加輕松。 但是最好先嘗試自己學習。