评论管理页面适配移动端设备

4 years ago · dad5710435
parent 1d8603e1c0
commit dad5710435
4 changed files with 12 additions and 8 deletions
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@ -33,20 +33,20 @@ li {
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
-    align-items: flex-start;
+    align-items: center;
+    justify-content: space-between;
 }

-.header .title {
-    flex: 90%;
-}
-
-.logout-wrapper {
-
+@media screen and (max-width:768px) {
+    .comment-main {
+        padding: 1rem;
+    }
 }

 .comment-main{
    padding: 1rem 5rem;
 }
+
 .vhead {
    padding-bottom: 0.5rem;
 }
@ -70,6 +70,7 @@ li {

 .vcomment {
    line-height: 1.8;
+    word-wrap: break-word;
 }

 .vcard {
@ -103,7 +104,7 @@ li {
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 1rem 2rem;
-    width: 350px;
+    width: 320px;
    border: 1px solid #dae1e3;
    background: #f8fbfd;
    border-radius: 5px;
--- a/views/comments.ejs
+++ b/views/comments.ejs
@ -3,6 +3,7 @@
 <head>
    <title><%= title %></title>
    <link rel="stylesheet" href="/stylesheets/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
 <div class="comment-main">
--- a/views/error.ejs
+++ b/views/error.ejs
@ -3,6 +3,7 @@
  <head>
    <title>Error</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1><%= message %></h1>
--- a/views/sign-up.ejs
+++ b/views/sign-up.ejs
@ -3,6 +3,7 @@
 <head>
    <title>LeanCloud评论管理</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>