rem实现手机页面自动缩放

设计稿一般宽度是750px，是在iphone6下的两倍。我们知道，rem是根据根元素字体大小，也就是html的字体来进行布局，我们只要调用这个JS函数，就可以根据屏幕大小改变根元素字体大小，用rem实现手机页面的自动缩放。

//根据屏幕大小改变根元素字体大小
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if(!clientWidth) return;
            if(clientWidth >= 750) {
                clientWidth=750;
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

 

 

HTML代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8">
 5         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 6         <link rel="stylesheet" type="text/css" href="style.css">
 7     </head>
 8     <body>
 9         <div class="book-wrap">
10             <div class="ele-book">
11             <script type="text/javascript" src="global.js"></script>
12                 <div class="book-author">
13                     <div class="book">
14                         <img src="img/book1.png">
15                         <div class="grade">评分：9.2</div>
16                         <p>儿童行为心理学</p>
17                     </div>
18                     <div class="author">吴莎</div>
19                 </div>
20                 <div class="book-author">
21                     <div class="book">
22                         <img src="img/book1.png">
23                         <div class="grade">评分：9.2</div>
24                         <p>儿童行为心理学把力气花在你想要的生活</p>
25                     </div>
26                     <div class="author">吴莎</div>
27                 </div>
28                 <div class="book-author authorR">
29                     <div class="book">
30                         <img src="img/book1.png">
31                         <div class="grade">评分：9.2</div>
32                         <p>把力气花在你想要的生活对吗</p>
33                     </div>
34                     <div class="author">爱德华</div>
35                 </div>
36                 
37             </div>
38         </div>
39     <script type="text/javascript" src="global.js"></script>
40     </body>
41 </html>

CSS代码

.book-wrap {
  width: 7rem;
  height: 3.81rem;
  // background-color: pink;
  border-radius: 10px;
  padding: 0.1rem;
  border: 1px solid pink;
}
.book-wrap .ele-book {
  position: relative;
}
.book-wrap .ele-book .book-author {
  float: left;
  margin-right: 0.5rem;
  width: 2rem;
}
.book-wrap .ele-book .book-author .book img {
  width: 2rem;
  height: 2rem;
}
.book-wrap .ele-book .book-author .book .grade {
  position: absolute;
  top: 1.6rem;
  width: 2rem;
  height: 0.4rem;
  font-size: 0.24rem;
  line-height: 0.4rem;
  background-color: #999999;
  text-align: center;
  color: #fff;
  opacity: 0.9;
  filter: alpha(opacity=80);
}
.book-wrap .ele-book .book-author .book p {
  height: 0.8rem;
  width: 2rem;
  line-height: 0.4rem;
  font-size: 0.28rem;
  overflow: hidden;
  margin: 0 0 0.3rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.book-wrap .ele-book .book-author .author {
  font-size: 0.24rem;
  color: #808080;
  margin-top: 0.2rem;
  padding-left: 0.4rem;
  height: 0.33rem;
  line-height: 0.33rem;
  background: url('img/author.png') no-repeat;
  background-size: 0.33rem; 
}
.book-wrap .ele-book .book-author.authorR {
  margin-right: 0;
}

 

posted @ 2017-07-18 09:34  Huang-jing  阅读(547)  评论(0)  编辑  收藏  举报