调试模式
八卦太大
- 此时注意，手机上一定要添加：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这行代码
视口大小：设备大小 1倍初始比例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
#八卦 {
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
animation: x 3s linear infinite;
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.75);
}
@media (max-width: 500px) {
#八卦 {
width: 200px;
height: 200px;
}
}
|
此时，PC端与手机端的样式出现不同的变化
- 注意@media（）{}的位置：紧跟要加媒体查询的样式之后
- 当页面宽度小于等于
500px时，额外地添加一个样式属性："@media语法"
- 逐行查看，是否有需要添加不同样式，写进@media里，注意包括连选择器一起复制进来，不要只复制样式，修改
此时，出现了怪异的样式
怎么改？
1
2
3
4
5
6
7
8
|
@media (max-width: 500px) {
#八卦>div:nth-child(6) {
border: 2px solid red;
width: 25px;
height: 25px;
margin-left: -12.5px;
}
}
|
被遮住，看不见border？
从最后一个元素开始改*显示优先级
- 只改像素，非百分数的属性值除以2，按1/2比例缩放，查看
- 像素是绝对单位，屏幕上有多少个像素然而也并不是那么固定：改了分辨率，随之改变（面试：像素固定吗？要分情况，像素大小随分辨率而改变）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#八卦>div:nth-child(6) {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
bottom: 75%;
margin-left: -25px;
border-radius: 50%;
background: white;
}
@media (max-width: 500px) {
#八卦>div:nth-child(6) {
/* border: 2px solid red; */
width: 25px;
height: 25px;
margin-left: -12.5px;
}
}
|
- 看不见就加border，所有的都改完后去掉除border
- 别在原来的样式里改，在@media里改，注意别忘记最后的大括号
"}":@media(){}
好烦，弄个变量
初级先通过重复来记忆和理解
代码测试链接：JSBin
JSBin Share还是有bug的，窗口调小，变椭圆，所以改成测试页面
此阶段完整代码：
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TaiJiTu</title>
<style>
body {
background: #eee;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
@keyframes x {
from {
transform: rotate(0deg);
}
to {
transform: rotate(306deg);
}
}
#八卦 {
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
animation: x 3s linear infinite;
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.75);
}
@media (max-width: 500px) {
#八卦 {
width: 200px;
height: 200px;
}
}
#八卦>div:first-child {
position: absolute;
width: 50%;
height: 100%;
left: 0;
background: black;
}
#八卦>div:nth-child(2) {
position: absolute;
width: 50%;
height: 100%;
right: 0;
background: white;
}
#八卦>div:nth-child(3) {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
margin-left: -100px;
border-radius: 50%;
background: black;
}
@media (max-width: 500px) {
#八卦>div:nth-child(3) {
width: 100px;
height: 100px;
margin-left: -50px;
}
}
#八卦>div:nth-child(4) {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
bottom: 0;
margin-left: -100px;
border-radius: 50%;
background: white;
}
@media (max-width: 500px) {
#八卦>div:nth-child(4) {
width: 100px;
height: 100px;
margin-left: -50px;
background: white;
}
}
#八卦>div:nth-child(5) {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: 75%;
margin-left: -25px;
border-radius: 50%;
background: black;
}
@media (max-width: 500px) {
#八卦>div:nth-child(5) {
width: 25px;
height: 25px;
margin-left: -12.5px;
}
}
#八卦>div:nth-child(6) {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
bottom: 75%;
margin-left: -25px;
border-radius: 50%;
background: white;
}
@media (max-width: 500px) {
#八卦>div:nth-child(6) {
/* border: 2px solid red; */
width: 25px;
height: 25px;
margin-left: -12.5px;
}
}
#八卦-wrapper {
border: 1px solid red;
height: 100vh;
/* vh:viewport height 用户可视范围 窗口左上到右下 */
display: flex;
justify-content: center;
align-items: center;
/* flex三行式 */
flex-direction: column;
}
#八卦-描述 {
margin-top: 1em;
}
</style>
</head>
<body>
<div id="八卦-wrapper">
<div id="八卦">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="八卦-描述">
道可道，非常道
</div>
</div>
</body>
</html>
|
参考文章
相关文章
- 作者： Joel
- 文章链接：
- 版权声明
- 非自由转载-非商用-非衍生-保持署名
- 河
掘
思
知
简