使用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的响应式设计

回答

相关问题