Introduction
This time, we will focus on Mobile adaptation
.
The characteristics
of Mobile adaptation:
- Smaller screen
- Simplified operation
- Concise content
Part 1
Why do we need to adapt to mobile?
- Small screen is not suitable for larger screen’s
UI
- The small screen may cause
abnormal display
- We need to let Mobile Phone load
faster
![171652688193_.pic_hd.jpg.webp](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
(https://www.apple.com/iphone-13-pro/specs/)
Part 2
The development environment:
hexo: 6.0.0
hexo-cli: 4.3.0
Butterfly: 4.20
Mac OS: Monterey (arm64)
Part 3
Before you do anything on your Blog, please make a backup to prevent you break it.
Part 4
Here is the normal way to change different appearances in CSS.
1 2 3
| @media screen and (max-width: 768px) { }
|
(max means the largest set will be in 768px)
1 2 3
| @media screen and (min-width: 768px) { }
|
(min means your site needs to reach 768px, at least)
You can also add different appearances including dark mode and light mode.
Light Mode
1 2 3
| @media screen and (max-width: 768px) { [data-theme="light"] }
|
Dark Mode
1 2 3
| @media screen and (max-width: 768px) { [data-theme="dark"] }
|
Part 5
Some Examples
Footer improvement
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
| @media screen and (min-width: 768px){ [data-theme="light"] #footer-wrap { color: #57606a; background: #f6f8fa; font-size: 1.2rem; font-weight: 700; padding: 0.5rem; border-radius: 15px; } }
@media screen and (min-width: 768px){ [data-theme="light"] #footer-wrap a { margin-right: 0.3rem !important; color: #57606a; font-size: 1.2rem; font-weight: 700;
border-radius: 12px; padding: 0.3em 0.6em; } } @media screen and (min-width: 768px){ #footer-wrap a:hover {
background: #1d74f2!important; box-shadow: 0 8px 12px -3px rgba(40, 109, 234,0.2); color: #ffffff !important;
} } #footer-wrap { position: relative; text-align: center; display: flex; overflow: hidden; justify-content: space-between; flex-wrap: wrap; }
@media screen and (max-width: 768px){ [data-theme="light"] #footer-wrap { color: #57606a; background: #f6f8fa; font-size: 0.83rem; font-weight: 700; padding: 1em 0em 1em 0.6em; border-radius: 17px; } }
@media screen and (max-width: 768px){ [data-theme="light"] #footer-wrap a { margin-right: 0.6rem !important; color: #57606a; font-size: 0.83rem; font-weight: 700;
} }
#footer-wrap a:hover { text-decoration: none; color: #1d74f2; }
@media screen and (min-width: 768px){ [data-theme="dark"] #footer-wrap { color: #ffffff; background: rgba(34, 37, 47, 0.35); padding: 0.5rem; font-size: 1.2rem; font-weight: 700; border-radius: 15px; } }
@media screen and (min-width: 768px){ [data-theme="dark"] #footer-wrap a { margin-right: 0.3rem !important; color: #ffffff; font-size: 1.2rem; font-weight: 700; border-radius: 12px; padding: 0.3em 0.6em; } }
@media screen and (max-width: 768px){ [data-theme="dark"] #footer-wrap { color: #ffffff; background: rgba(34, 37, 47, 0.35); font-size: 0.83rem; font-weight: 700; padding: 1em 0em 1em 0.6em; border-radius: 17px; } }
@media screen and (max-width: 768px){ [data-theme="dark"] #footer-wrap a { margin-right: 0.6rem !important; color: #ffffff; font-size: 0.83rem; font-weight: 700;
} }
|
Post Cover improvement
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
| @media screen and (max-width: 768px){ #post-info .post-title { font-size: 2.5em; } } @media screen and (min-width: 768px){ #post-info .post-title { font-size: 3.5em;
} } @media screen and (min-width: 768px){ #post-info #post-meta { font-weight: 700; font-size: 1.1rem;
} } #post-info .post-title { font-weight: 700; line-height: 1.2; text-align: left; font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; margin: 1rem 0 3rem 0!important; margin-bottom: 16px !important; } #page-header #post-info { text-align: left; }
@media screen and (min-width: 1300px){ [data-theme="light"] #page-header.post-bg { height: 450px; box-shadow: 300px -60px 300px 60px rgba(0, 0, 0, .31) inset; } } @media screen and (max-width: 1200px){ [data-theme="light"] #page-header.post-bg { height: 380px; box-shadow: 300px -60px 300px 60px rgba(0, 0, 0, .31) inset; } } @media screen and (max-width: 768px){ [data-theme="light"] #page-header.post-bg { height: 300px; box-shadow: 300px -60px 300px 60px rgba(0, 0, 0, .31) inset; } } @media screen and (min-width: 1300px){ [data-theme="dark"] #page-header.post-bg { height: 450px; box-shadow: 300px -60px 300px 60px #020C19 inset; } } @media screen and (max-width: 1200px){ [data-theme="dark"] #page-header.post-bg { height: 380px; box-shadow: 300px -60px 300px 60px rgba(0, 0, 0, .31) inset; } }
@media screen and (max-width: 768px){ [data-theme="dark"] #page-header.post-bg { height: 300px; box-shadow: 200px -60px 200px 60px #020C19 inset; } } @media screen and (min-width: 768px){ .layout { padding-top: 1rem; } } @media screen and (max-width: 768px){ .layout { padding-top: 0.5rem; } } @media screen and (max-width: 768px){ .layout { padding: 0; padding-top: 0em; } }
|
https://cdn.jsdelivr.net/gh/briangonzalez/rgbaster.js@1.1.0/rgbaster.min.js
Final
You already know how to show the different appearances on difference devices now, have fun.
🤪