使用Css的響應式設計

我想爲我的應用程序中的彈出式通知做出響應式設計。我使用Angular Toaster進行通知。使用Css的響應式設計

例如，我在屏幕的中心找到烤麪包機容器元素，但是使用絕對位置，所以對於較小的屏幕，通知保持在相同位置，因此不顯示它們。我想通知相對於它們所在的父元素（在這裏是容器網格）。我如何實現使用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>

而且我用烤麪包器容器元素自定義CSS規則：

.toast-container-custo 
{ 
position: absolute; 
top:100px; 
left: 780px; 
}

來源

2015-01-21 fgonzalez

使用百分比，而不是像素

你可以使您的div與它的容器相關聯使用百分比寬度/高度和頂部/左側v alues。您在此使用的百分比將與父容器大小有關。所以，如果你的父容器設置爲width:300px和你的孩子被設置爲width:50%那麼孩子將在該元素width:150px;

使用相對定位呈現。

相對定位，就是它在標籤上說的 - 它將元素相對於其他元素進行定位。所以，你還需要將元素設置爲position:relative;

這是我怎麼會去這樣的：

.toast-container-custo{ 
    position: relative; 
    margin: 0 auto; 
    width: 30%; 
    height:30px; 
}

margin:0 auto將圍繞子元素內它的容器，水平
width現在是父容器的30％
height，好了，我只是更願意將此設置爲一個固定的px值，但可以definetely使用%這裏也

來源

2015-01-21 12:10:04

您可以將您的容器更改爲：

.toast-container-custo{ 
    position: absolute; 
    top: 100px; 
    margin-left: auto; 
    float: none; 
    margin-right: auto; 
    left: 0; 
    right: 0; 
}

一般來說，這是一個好辦法水平居中絕對元素。

來源

2015-01-21 12:15:18 vaskort

使用Css的響應式設計

回答

相關問題