rem 

  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>

 

posted @ 2017-09-04 09:27  铜镜123  阅读(173)  评论(0)    收藏  举报