在CSS中響應移動

Question

我試圖讓我的底部表格響應移動和桌面。你可以在筆記本電腦看到下片當你點擊新主題它工作一切正常：

但隨後讓我們看看它的移動版本（定期iPhone 5）：

你可以看到它的超越可怕的......我的HTML對於視圖（最小化）：

<div class="toolbar_new_topic" ng-if="authDataDesc!=null"> 
    <md-button id="NEW_TOPIC_BUTTON" ng-click="showNewTopic($event)"> 
    <ng-md-icon icon="add_box" style="fill: white" size="20" id="add_icon"></ng-md-icon> 
    <span id="text_new_topic" color="white">Create a New Topic</span> 
    </md-button> 
</div> 

我的CSS是：

.listdemoListControls md-divider { 
    margin-top: 0; 
    margin-bottom: 0 
} 

.listdemoListControls md-list { 
    padding-top: 0 
} 

.listdemoListControls md-list-item ._md-list-item-inner>._md-list-item-inner>p, 
.listdemoListControls md-list-item ._md-list-item-inner>p, 
.listdemoListControls md-list-item>._md-list-item-inner>p, 
.listdemoListControls md-list-item>p { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none 
} 

body, 
html { 
    background: #DDD 
} 

#MD-ICON-1 { 
    position: relative; 
    left: -40px; 
    bottom: -23px 
} 

.avatar_custom { 
    width: 20px; 
    height: 20px 
} 

.avatar_creator { 
    border-radius: 50%; 
    position: relative; 
    height: 30px; 
    top: 10px; 
    width: 30px 
} 

.toolbar_new_topic { 
    display: flex; 
    flex-direction: row; 
    justify-content: flex-end 
} 

#NEW_TOPIC_BUTTON { 
    background-color: #81C784; 
    font-weight: 700; 
    margin-right: 50px 
} 

span.views_icon { 
    position: relative; 
    top: 5px 
} 

span.replies_list.md-secondary.ng-binding { 
    position: relative; 
    left: -55px; 
    top: 18px 
} 

.user-avatar-wrapper { 
    padding: 0; 
    margin: 0; 
    height: 50px; 
    width: 50px; 
    border-radius: 50%; 
    min-width: 50px; 
    display: flex; 
    align-items: center 
} 

.tags a, 
.tags li { 
    height: 24px; 
    line-height: 24px; 
    font-size: 11px 
} 

.search_autocomplete, 
input#input-0 { 
    font-family: FontAwesome; 
    font-style: normal; 
    font-weight: 400; 
    text-decoration: inherit 
} 

.tags { 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    right: 24px; 
    bottom: -12px; 
    list-style: none 
} 

.tags li { 
    float: left; 
    position: relative 
} 

.tags a:after, 
.tags a:before { 
    content: ""; 
    position: absolute; 
    float: left 
} 

.tags a { 
    float: left; 
    margin-left: 20px; 
    padding: 0 10px 0 12px; 
    background: #0089e0; 
    color: #fff; 
    text-decoration: none; 
    -moz-border-radius-bottomright: 4px; 
    -webkit-border-bottom-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
    -moz-border-radius-topright: 4px; 
    -webkit-border-top-right-radius: 4px; 
    border-top-right-radius: 4px 
} 

.tags a:before { 
    top: 0; 
    left: -12px; 
    width: 0; 
    height: 0; 
    border-color: transparent #0089e0 transparent transparent; 
    border-style: solid; 
    border-width: 12px 12px 12px 0 
} 

.tags a:after { 
    top: 10px; 
    left: 0; 
    width: 4px; 
    height: 4px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    background: #fff; 
    -moz-box-shadow: -1px -1px 2px #004977; 
    -webkit-box-shadow: -1px -1px 2px #004977; 
    box-shadow: -1px -1px 2px #004977 
} 

.tags a:hover { 
    background: #555 
} 

.tags a:hover:before { 
    border-color: transparent #555 transparent transparent 
} 

span.last_activity.ng-binding { 
    position: relative; 
    right: 129px 
} 

ul.tags { 
    position: absolute; 
    right: 1138px; 
    bottom: 20px 
} 

span.bookmark_icon { 
    position: relative; 
    right: 130px; 
    top: 1px 
} 

.user-avatar { 
    height: 50px; 
    width: 50px; 
    border-radius: 50% 
} 

md-list.ng-scope.md-whiteframe-24dp.flex-sm-55.flex-gt-sm-45.flex-gt-md-45 { 
    position: relative; 
    top: 25px; 
    left: 25px; 
    background: #EF5350 
} 

md-list-item.md-3-line.ng-scope.md-clickable { 
    background-color: #EF5350 
} 

.tags a { 
    position: relative; 
    left: 800px 
} 

即時通訊目前編程本網站here所以如果你去那裏，我們可以真正的快速解決這個問題： https://ide.c9.io/amanuel2/ng-fourm

感謝您的時間！

Answer 1

您需要在CSS中使用媒體查詢來定位移動設備大小。例如：

@media (max-width: 420px) { 
    /* your styles here */ 
}