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- 320px) { 30 html { 31 font-size: 42.7px; 32 } 33 } 34 35 @media only screen and (min- 321px) and (max- 360px) { 36 html { 37 font-size: 48px; 38 } 39 } 40 41 @media only screen and (min- 361px) and (max- 375px) { 42 html { 43 font-size: 50px; 44 } 45 } 46 47 @media only screen and (min- 376px) and (max- 400px) { 48 html { 49 font-size: 53.3px; 50 } 51 } 52 53 @media only screen and (min- 401px) and (max- 414px) { 54 html { 55 font-size: 55.2px; 56 } 57 } 58 59 @media only screen and (min- 415px) and (max- 750px) { 60 html { 61 font-size: 100px; 62 } 63 } 64 65 @media only screen and (min- 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 100%; 94 height: 100%; 95 } 96 97 .box{ 98 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>