移动端适配

Author: hyy1115

src/app.css

@@ -3,14 +3,6 @@
     margin: 0;
     padding: 0;
 }
-body, html {
-    font-size: 10px;
-}
-#root {
-    min-width: 320px;
-    max-width: 640px;
-    margin: 0 auto;
-}
 a {
     text-decoration: none;
 }
@@ -80,4 +72,38 @@ a {
 .left-leave.left-leave-active {
     opacity: 1;
     transition: all 0.4s ease-out;
+}
+
+@media screen and (min-width: 320px) {
+    html, body { font-size: 12px; }
+}
+@media screen and (min-width: 360px) {
+    html, body { font-size: 13.5px; }
+}
+@media screen and (min-width: 375px) {
+    html, body { font-size: 14px; }
+}
+@media screen and (min-width: 414px) {
+    html, body { font-size: 15.5px; }
+}
+@media screen and (min-width: 720px) {
+    html, body { font-size: 27px; }
+}
+@media screen and (min-width: 1024px) {
+    html, body { font-size: 38.4px; }
+}
+@media screen and (min-width: 1080px) {
+    html, body { font-size: 40.5px; }
+}
+@media screen and (min-width: 1366px) {
+    html, body { font-size: 51px; }
+}
+@media screen and (min-width: 1440px) {
+    html, body { font-size: 54px; }
+}
+@media screen and (min-width: 1600px) {
+    html, body { font-size: 60px; }
+}
+@media screen and (min-width: 1920px) {
+    html, body { font-size: 72px; }
 }

src/components/Search/hotSearch.js

@@ -10,11 +10,11 @@ export class HotSearch extends React.Component {
     render() {
         const { hotText, hotClick } = this.props
         return (
-            <span className="style_span"
+            <a className="style_span"
                   onClick={hotClick}
             >
                 {hotText}
-            </span>
+            </a>
         )
     }
 }

src/containers/Home/styles/home.less

@@ -2,22 +2,19 @@
   position: relative;
   width: 100%;
   color: #fff;
-  height: 40px;
-  line-height: 40px;
+  height: 3.333rem;
+  line-height: 3.333rem;
   text-align: center;
-  font-size: 1.7rem;
+  font-size: 1.4rem;
 
   .a_link {
     position: absolute;
     display: block;
     top: 0;
     color: #6c6c6c;
-    right: 5%;
-    width: 38px;
-    height: 40px;
-    z-index: 100;
-    font-size: 0.9em;
-    font-weight: normal;
+    right: 1.25rem;
+    width: 3.1667rem;
+    height: 3.333rem;
 
     .a_img {
       width: 100%;
@@ -32,7 +29,7 @@
 .style_div {
   width: 100%;
   background: #fff;
-  padding: 5px 0;
+  padding: 0.25rem 0;
   overflow: hidden;
   .style_ul {
     width: 90%;
@@ -44,8 +41,8 @@
       float: left;
       list-style: none;
       text-align: center;
-      padding-bottom: 10px;
-      padding-top: 5px;
+      padding-bottom: 0.833rem;
+      padding-top: 0.41667rem;
       .style_img {
         width: 35%;
         height: auto;
@@ -55,22 +52,22 @@
       }
       .style_span {
         color: #3c3c3c;
-        font-size: 1.3rem;
+        font-size: 1.2rem;
       }
     }
   }
 }
 
 .style_p {
-  font-size: 1.4rem;
-  padding: 5px 20px;
+  font-size: 1.3rem;
+  padding: 0.41667rem 1.25rem;
   border-bottom: 1px solid #f9f9f9;
 }
 
 .style_main {
   width: 100%;
   background: #fff;
-  padding: 5px 0;
+  padding: 0.41667rem 0;
   overflow: hidden;
   .style_div {
     width: 90%;
@@ -104,8 +101,8 @@
 .home-book-list {
   display: flex;
   flex-direction: row;
-  border-bottom: 0.5rem solid #eee;
-  padding: 1rem 0;
+  border-bottom: 0.75rem solid #eee;
+  padding: 0.833rem 0;
   .book-img {
     position: relative;
     width: 33.33%;
@@ -131,13 +128,14 @@
     flex-direction: column;
     .book-title {
       color: #3f3f3f;
-      font-size: 1.6rem;
+      font-size: 1.2rem;
       line-height: 1.8rem;
     }
     .book-author {
       color: #a0a0a0;
-      font-size: 1.2rem;
+      font-size: 1.1rem;
       line-height: 1.6rem;
     }
   }
-}
+}
+

src/containers/Search/styles/search.less

@@ -3,67 +3,67 @@
   width: 100%;
   border-bottom: 1px solid #eee;
   .style_main {
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding-top: 0.833rem;
+    padding-bottom: 0.833rem;
     display: flex;
+    align-items: center;
+
     .style_a {
-      width: 15%;
-      height: 25px;
+      width: 4rem;
+      height: 2.0833rem;
       display: inline-flex;
       text-decoration: none;
       justify-content: center;
-      align-items: center;
       .style_a_img {
         width: auto;
-        height: 25px;
+        height: 2.0833rem;
       }
     }
     .style_div_content {
-      width: 70%;
+      width: 18rem;
       position: relative;
       .style_div_img {
         position: absolute;
-        left: 2px;
-        width: 25px;
+        left: 0.1667rem;
+        width: 2.0833rem;
         height: auto;
-        top: 3px;
+        top: 0.36rem;
       }
       .style_div_input {
-        width: 78%;
+        width: 14.5rem;
         border: 1px solid #efefef;
         background: #efefef;
-        padding: 7px 10% 5px 12%;
-        border-radius: 25px;
+        padding: 0.5833rem 0.5rem 0.41667rem 2.3rem;
+        border-radius: 2.0833rem;
         outline: none;
-        font-size: 1.3rem;
+        font-size: 1.2rem;
       }
     }
     .style_right_a {
-      width: 15%;
+      width: 4rem;
       text-align: center;
-      margin-top: 5px;
-      font-size: 1.4rem;
+      font-size: 1.3rem;
       color: #3c3c3c;
       text-decoration: none;
     }
   }
 }
 
 .style_div_p {
-  padding: 5px 15px;
+  padding: 0.833rem 1.25rem;
   .style_span {
     display: inline-block;
     background: #f4f4f4;
-    padding: 5px 10px;
-    margin-right: 5%;
-    margin-bottom: 5px;
-    font-size: 0.8em;
+    padding: 0.41667rem 0.833rem;
+    margin-right: 1rem;
+    margin-bottom: 0.833rem;
+    color: #444;
   }
 }
 
 .search-hot-title {
-  padding: 0.5rem 5%;
-  font-size: 1.3rem;
+  padding: 0.833rem 1.25rem 0 1.25rem;
+  font-size: 1.2rem;
   i {
     color: #646464;
   }