1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 <style>
8 /*
9 rem是相对单位
10 1rem = html font-size的大小
11
12 使用rem布局
13 得到效果图，看效果图的宽度大小
14 设置rem大小
15
16 通过rem实现响应式布局
17
18 屏幕大小320 rem 320/750*100
19 屏幕大小360 rem 360/750*100
20 屏幕大小375 rem 375/750*100
21 屏幕大小400 rem 400/750*100
22 屏幕大小414 rem 414/750*100
23 屏幕大小750 rem 100
24
25 *
26 * */
27
28
29 @media only screen and (max-width: 320px) {
30 html {
31 font-size: 42.7px;
32 }
33 }
34
35 @media only screen and (min-width: 321px) and (max-width: 360px) {
36 html {
37 font-size: 48px;
38 }
39 }
40
41 @media only screen and (min-width: 361px) and (max-width: 375px) {
42 html {
43 font-size: 50px;
44 }
45 }
46
47 @media only screen and (min-width: 376px) and (max-width: 400px) {
48 html {
49 font-size: 53.3px;
50 }
51 }
52
53 @media only screen and (min-width: 401px) and (max-width: 414px) {
54 html {
55 font-size: 55.2px;
56 }
57 }
58
59 @media only screen and (min-width: 415px) and (max-width: 750px) {
60 html {
61 font-size: 100px;
62 }
63 }
64
65 @media only screen and (min-width: 750px) {
66 html {
67 font-size: 100px;
68 }
69 }
70
71 body {
72 font-size: 62.5%;
73 }
74
75 * {
76 margin: 0;
77 padding: 0;
78 }
79
80 li {
81 list-style: none;
82 }
83
84 a {
85 text-decoration: none;
86 color: #000;
87 }
88 img{
89 display: block;
90 }
91 html,
92 body {
93 width: 100%;
94 height: 100%;
95 }
96
97 .box{
98 width: 100%;
99 height: 100%;
100 /*background: url(img/bg.png) no-repeat center;*/
101 /*background-size: cover;*/
102 }
103
104 .box p{
105 font-size: 1rem;
106 }
107 </style>
108 </head>
109 <body>
110 <div class="box" >
111 <p>加拉塞克</p>
112 </div>
113 </body>
114 </html>
