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