はじめに
今回はモバイル対応に焦点を当てます。
モバイル対応の特徴：
パート1
なぜモバイル対応が必要なのか？
- 小さな画面は大きな画面向けの
UIに適していません - 小さな画面では
表示異常が発生する可能性があります - モバイルでの
読み込みを高速化する必要があります
（https://www.apple.com/iphone-13-pro/specs/）
パート2
開発環境：
hexo: 6.0.0
hexo-cli: 4.3.0
Butterfly: 4.20
Mac OS: Monterey (arm64)
パート3
ブログで作業を始める前に、破損を防ぐためにバックアップを作成してください。
パート4
CSSで異なる外観を変更する一般的な方法を紹介します。
1
2
3
| @media screen and (max-width: 768px) {
}
|
（maxは768pxを最大値として設定します）
1
2
3
| @media screen and (min-width: 768px) {
}
|
（minはサイトが少なくとも768pxに達する必要があることを意味します）
ダークモードとライトモードを含む異なる外観を追加することもできます。
ライトモード
1
2
3
| @media screen and (max-width: 768px) {
[data-theme="light"]
}
|
ダークモード
1
2
3
| @media screen and (max-width: 768px) {
[data-theme="dark"]
}
|
パート5
いくつかの例
フッターの改善
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;
}
}
|
投稿カバーの改善
1
2
3
4
5
6
7
8
9
10
11
|
@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;
}
}
|
