使用CSS的響應式設計
[英]Responsive design using Css
問題描述
我想對我的應用程序中的彈出通知進行響應式設計。我正在使用Angular Toaster進行通知。
例如，我將烤面包機容器元素放置在屏幕中央，但是使用了絕對位置，因此對於較小的屏幕，通知會停留在同一位置，因此不會顯示。 我想相對於包含它們的父元素（在這種情況下為容器網格）進行通知。 如何使用CSS實現該目標？ 這是我的html代碼：
<body data-ng-controller="AppController">
<div id="container" class="container">
<toaster-container toaster-options="{'position-class': 'toast-container-custo','time-out': 3000, 'close-button':true}"></toaster-container>
<div id="header" data-ng-include="'partials/header/header.html'" ></div>
<div data-ng-view></div>
<div id="footer" data-ng-include="'partials/footer/footer.html'"></div>
<!-- This is the div with the overlay css class, so no matter where it is located this div inside the screen, it will cover the whole screen-->
<div id="loader" class="loading overlay" data-ng-if="loader.loading">
<p>We are loading the products. Please wait...</p>
<img alt="" src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>
</body>
還有我用於toaster-container元素的自定義css規則：
.toast-container-custo
{
position: absolute;
top:100px;
left: 780px;
}
2 個解決方案
解決方案1
1 已采納 2015-01-21 12:10:04
- 使用百分比代替像素
您可以使用寬度/高度和頂部/左側值的百分比使div與其容器相關。 您在此處使用的百分比將與父容器的大小有關 。 因此，如果將您的父容器設置為width:300px而將您的孩子設置為width:50%則將以width:150px;渲染該孩子width:150px;
- 對元素使用相對定位。
相對定位，就是標簽上所說的-將元素相對於其他元素定位。 因此，您還需要將元素設置為position:relative;
這是我的處理方法：
.toast-container-custo{
position: relative;
margin: 0 auto;
width: 30%;
height:30px;
}
-
margin:0 auto將子元素在其容器中水平居中 - 現在的
width是父容器的30％ -
height，好吧，我只想將其設置為固定的px值，但您也可以在此處完全定義%
解決方案2
0 2015-01-21 12:15:18
您可以將容器更改為：
.toast-container-custo{
position: absolute;
top: 100px;
margin-left: auto;
float: none;
margin-right: auto;
left: 0;
right: 0;
}
通常，這是將水平絕對元素居中的好方法。
使用HTML / CSS的響應式設計中的意外行為
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.