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 */ 
}