优化不同尺寸屏幕的显示

source/less/_base.less

@@ -199,7 +199,7 @@ img {
 }
 .container.clearfix{
     display: flex;
-    @media(max-width: @on_phone) {
+    @media(max-width: @on_pad) {
         display: inherit;
     }
 }

source/less/_header.less

@@ -138,6 +138,9 @@
         position: relative;
         height: @height_navbar - @gap;
         width: @width_sidebar;
+        @media(max-width: @on_laptop){
+            width: @width_sidebar_m;
+        }
         line-height: @height_navbar - @gap;
         margin-top: @gap/2;
         margin-bottom: @gap/2;

source/less/_layout.less

@@ -4,18 +4,19 @@
 
 
 // start: 布局尺寸 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
-@on_modal_threshold:  680px;
+@on_phone:         580px;
-@on_phone:         820px;
+@on_pad:           768px;
-@on_laptop:        990px;
+@on_laptop:        1024px; // 1024 + 285
 @on_desktop:       1200px;
 // container
 @width_container:  1200px;
-// post
+@on_modal_threshold:  680px;
-@width_post_max: 980px;
 // 侧边栏宽度
 @width_sidebar: 285px;
+@width_sidebar_m: 240px;
 // 搜索框的宽度，建议和侧边栏宽度保持一致
 @width_searchbar: @width_sidebar;
+@width_searchbar_m: @width_sidebar_m;
 // 一个cell的高度
 @height_cell: 36px;
 // end: 布局尺寸 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

source/less/_links.less

@@ -7,6 +7,7 @@
       display: flex;
       flex-wrap: wrap;
       margin: -@gap/2;
+      border-radius: @border_radius;
       .friend-card{
         display: flex;
         border-radius: @border_radius;
@@ -15,13 +16,38 @@
         margin: @gap/2;
         color: fade(@color_text_main, 80%);
         justify-content: flex-start;
+        align-content: flex-start;
+        flex-direction: column;
+        width:~"calc(100%/3 - @{gap})";
+        @media(max-width: @on_laptop){
+          width:~"calc(100%/3 - @{gap})";
+        }
+        @media(max-width: @on_pad){
+          width:~"calc(100%/2 - @{gap})";
+        }
         @media(max-width: @on_phone){
           width: 100%;
+          margin: 0 @gap/4;
+          border-radius: 0;
+          flex-direction: row;
+          &:first-child{
+            border-top-left-radius: @border_radius;
+            border-top-right-radius: @border_radius;
+          }
+          &:last-child{
+            border-bottom-left-radius: @border_radius;
+            border-bottom-right-radius: @border_radius;
+          }
         }
         &:hover{
           text-decoration: none;
           box-shadow: @boxshadow_card_raised, 0 32px 64px 0px rgba(0, 0, 0, 0.1);
           transform: scale(1.05);
+          border-radius: @border_radius;
+          @media(max-width: @on_phone){
+            transform: scale(1.02);
+            margin: @gap/2 0;
+          }
           .friend-left{
             .avatar{
               transform: scale(1.1) rotate(12deg);
@@ -31,36 +57,54 @@
 
         }
         .friend-left{
+          align-self: center;
           .avatar{
             width: 64px;
             height: 64px;
             min-width: 64px;
             min-height: 64px;
-            margin: @gap;
+            margin: @gap @gap/2 @gap/2 @gap/2;
             border-radius: 100%;
             border: 1px solid white;
             box-shadow: @boxshadow_card_normal;
+            @media(max-width: @on_phone){
+              margin: @gap;
+            }
           }
         }
         .friend-right{
           flex: 1;
-          margin: @gap @gap @gap 0;
+          margin: 0 @gap/2 @gap/2 @gap/2;
           display: flex;
           flex-direction: column;
-          justify-content: space-around;
+          text-align: center;
+          p{
+            text-align: center;
+          }
+          @media(max-width: @on_phone){
+            margin: @gap @gap @gap 0;
+            text-align: left;
+            p{
+              text-align: left;
+            }
+          }
           .friend-tags-wrapper{
             .enable-trans();
             margin-left: -2px;
             word-spacing: 4px;
             word-break:break-all;
+            margin-bottom: @gap/2;
+            @media(max-width: @on_phone){
+              margin-bottom: 0;
+            }
           }
           p{
             margin: 0;
-            padding: 0;
             text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
             &.friend-name{
               font-size: @fontsize_base;
               font-weight: bold;
+              padding-top: 4px;
             }
             &.tags{
               font-size: @fontsize_small * 0.85;

source/less/_main.less

@@ -1,5 +1,11 @@
 .l_main {
     width: ~"calc(100% - 1 * @{width_sidebar})";
+    @media(max-width: @on_laptop) {
+        width: ~"calc(100% - 1 * @{width_sidebar_m})";
+    }
+    @media(max-width: @on_pad) {
+        width: 100%;
+    }
     padding-right: @gap;
     float: left;
     .post-list {
@@ -376,7 +382,7 @@
             border-radius: 4px;
         }
     }
-    @media(max-width:@on_phone) {
+    @media(max-width:@on_pad) {
         padding-right: 0;
         @media(max-width: @on_phone) {
             width: 100%;

source/less/_side.less

@@ -4,7 +4,10 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    @media(max-width: @on_phone) {
+    @media(max-width: @on_laptop) {
+        width: @width_sidebar_m;
+    }
+    @media(max-width: @on_pad) {
         margin: @gap 0 0;
         width: 100%;
     }

source/less/_widget.less

@@ -17,15 +17,20 @@
     &:active {
         box-shadow: @boxshadow_card_normal;
     }
-    // height: 100%;
+
+    width: @width_sidebar;
+    @media(max-width: @on_laptop) {
+        width: @width_sidebar_m;
+    }
+    @media(max-width: @on_pad) {
+        width: 100%;
+    }
     @media(max-width: @on_phone) {
         border-radius: 0;
-        width: 100%;
         &:hover {
             box-shadow: @boxshadow_card_normal;
         }
     }
-    width: @width_sidebar;
     max-height: ~"calc(100% - @{height_navbar} - 4 * @{gap})";
     .header{
         display: flex;
@@ -105,14 +110,18 @@
             display: flex;
             justify-content: center;
             background-color: transparent;
-            @media(max-width: @on_phone){
+            @media(max-width: @on_pad){
                 padding: @gap/2;
             }
         }
         img{
             width: @width_sidebar;
             height: @width_sidebar;
-            @media(max-width: @on_phone){
+            @media(max-width: @on_laptop) {
+                width: @width_sidebar_m;
+                height: @width_sidebar_m;
+            }
+            @media(max-width: @on_pad){
                 width: 80px;
                 height: 80px;
                 border-radius: 100%;
@@ -130,7 +139,7 @@
             font-weight: bold;
             padding-bottom: 0;
             padding: @gap/2 @gap 0 @gap;
-            @media(max-width: @on_phone){
+            @media(max-width: @on_pad){
                 padding: @gap/2 @gap;
             }
         }
@@ -160,7 +169,7 @@
                 }
             }
         }
-        @media(max-width: @on_phone){
+        @media(max-width: @on_pad){
           box-shadow: none;
           background: @theme_background;
           .social-wrapper{