rem测试用实现移动端自适应页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/> <title>无标题文档</title> </head> <style> *{ padding:0;margin:0} li{ list-style:none} html{ font-size:100px;} body{ font-size:.12rem; max-width:640px; margin:0 auto} footer,header{ z-index:9999; background:rgba(0,0,0,.8); color:#fff; font-size:.16rem; width:100%; height:.4rem; line-height:.4rem; text-align:center;} header{ position:fixed; left:0;top:0;} .ullist {} .ullist li{ margin:.1rem .1rem 0 .1rem; height:.72rem;} .ullist li a{display: -webkit-box;display: box; height:.72rem; color:#333; text-decoration:none} .ullist li img{width:1rem; height:.72rem; margin-right:.1rem;} .ullist li .info{-webkit-box-flex: 1;box-flex: 1;} .ullist li .title{ height:.32rem; line-height:.32rem; font-size:.14rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .ullist li .text{ line-height:.2rem; height:.4rem; color:#666; overflow:hidden;} /**swiper**/ .swiper-container {margin: 0 auto;position: relative;overflow: hidden;z-index: 1;} .swiper-wrapper {position: relative;width: 100%;height: 100%;z-index: 1;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform;-o-transition-property: -o-transform;-ms-transition-property: -ms-transform;transition-property: transform;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;} .swiper-container-android .swiper-slide, .swiper-wrapper {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-o-transform: translate(0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)} .swiper-slide {-webkit-flex-shrink: 0;-ms-flex: 0 0 auto;flex-shrink: 0;width: 100%;height: 100%;position: relative;} .swiper-pagination {position: absolute;text-align: center;-webkit-transition: .3s;-moz-transition: .3s;-o-transition: .3s;transition: .3s;-webkit-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);z-index: 10;} .swiper-container-horizontal>.swiper-pagination {bottom: 10px;left: 0;width: 100%;} .swiper-pagination-bullet {width: 8px;height: 8px;display: inline-block;margin: 0 3px;border-radius: 100%;background: #ccc;} .swiper-pagination-bullet-active{ background-color:#fa4e68 !important;} .banner{ position:relative; height:1.5rem; width:100%; margin-top:.4rem; overflow:hidden} .banner img,.banner li{ height:100%; width:100%} .swiper-container3{ height:1.5rem;} </style> <body> <header> <p>这是一段测试rem的文字</p> </header> <!-- <div>这是一段测试rem的文字</div> <a href="">这是一个文字连接</a>--> <section class="banner"> <div class="swiper-container3"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="111"><img src="http://m.pc6.com/public/img/huangtu.jpg"></a></div> <div class="swiper-slide"><a href="222"><img src="http://m.96u.com/qmqz/top.jpg"></a></div> <div class="swiper-slide"><a href="3333"><img src="http://m.pc6.com/public/img/20151029.jpg"></a></div> <div class="swiper-slide"><a href="444"><img src="http://m.pc6.com/public/img/menghuanxiyou.jpg"></a></div> </div> <div class="swiper-pagination"></div> </div> </section> <ul class="ullist"> <li><a href=""><img src="http://mtgi1.jia.com/115/609/15609632.m.jpg"><div class="info"><p class="title">这是文章标题</p><p class="text">这是简介这是简介这是简介这是简介这是简介这是简介</p></div></a></li> <li><a href=""><img src="http://mtgi1.jia.com/114/691/14691671.m.jpg"><div class="info"><p class="title">这是文章标题</p><p class="text">这是简介这是简介这是简介这是简介这是简介这是简介</p></div></a></li> <li><a href=""><img src="http://tgi12.jia.com/116/034/16034054.jpg"><div class="info"><p class="title">这是这是文章标题这是文章标题文章标题</p><p class="text">这是简介这是简介这是简介这是简介这是简介这是简介</p></div></a></li> <li><a href=""><img src="http://mtgi1.jia.com/115/609/15609632.m.jpg"><div class="info"><p class="title">这是文章标题</p><p class="text">这是简介这是简介这是简介这是简介这是简介这是简介</p></div></a></li> <li><a href=""><img src="http://mtgi1.jia.com/114/691/14691671.m.jpg"><div class="info"><p class="title">这是文章标题</p><p class="text">这是简介这是简介这是简介这是简介这是简介这是简介</p></div></a></li> <li><a href=""><img src="http://tgi12.jia.com/116/034/16034054.jpg"><div class="info"><p class="title">这是这是文章标题这是文章标题文章标题</p><p class="text">这是简介这是简介这是简介这是简介这是简介这是简介</p></div></a></li> <li><a href=""><img src="http://mtgi1.jia.com/115/609/15609632.m.jpg"><div class="info"><p class="title">这是文章标题</p><p class="text">这是简介这是简介这是简介这是简介这是简介这是简介</p></div></a></li> <li><a href=""><img src="http://mtgi1.jia.com/114/691/14691671.m.jpg"><div class="info"><p class="title">这是文章标题</p><p class="text">这是简介这是简介这是简介这是简介这是简介这是简介</p></div></a></li> <li><a href=""><img src="http://tgi12.jia.com/116/034/16034054.jpg"><div class="info"><p class="title">这是这是文章标题这是文章标题文章标题</p><p class="text">这是简介这是简介这是简介这是简介这是简介这是简介</p></div></a></li> </ul> <footer>测试rem</footer> <script src="http://m.qbaobei.com/Public/Home/qbaobeimobile2/js/jquery.js"></script> <script src="http://m.qbaobei.com/Public/Home/qbaobeimobile2/js/swiper.js"></script> <script> (function(a, d) { var b = a.documentElement, e = "orientationchange" in window ? "orientationchange" : "resize", c = function() { var a = b.clientWidth; a && (b.style.fontSize = Math.min(a, 640) / 320 * 100 + "px") }; console.log(b.style.fontSize); a.addEventListener && (d.addEventListener(e, c, !1), a.addEventListener("DOMContentLoaded", c, !1)) })(document, window); //lunbo $(function(){ function autoPic(){ var mySwiper = new Swiper('.swiper-container3', { //autoplay: 3000, loop : true, autoplayDisableOnInteraction : false, pagination : '.swiper-pagination', }); }; if($('.swiper-container3').length>0){autoPic()}; }) </script> </body> </html>
Tips：注意雪碧图处理方式
/**雪碧背景图错位解决方案一 使用百分比**/
/*header .ico{ width:.4rem; height:.4rem; background:url(http://m.qbaobei.com/Public/Home/qbaobeimobile2/images/ico.png) 0 44.5% no-repeat; background-size: 34px auto;}
*//**雪碧背景图错位解决方案 二**/
header .ico{width:.4rem; height:.4rem; background: none;position: relative;overflow: hidden;}
header .ico:after{content: '';display: block;width: 10000%;height: 10000%;position: absolute;left: 0;top: 0;background-image: url(http://m.qbaobei.com/Public/Home/qbaobeimobile2/images/ico.png);background-repeat: no-repeat;background-size: 34rem;-webkit-transform-origin: 0 0;-webkit-transform: scale(.01);transform-origin: 0 0;transform: scale(.01);background-position: 0 -373rem;}
2.移动端深度文章研究推荐文章
1.http://www.cocoachina.com/webapp/20151110/14148.html
2.http://taobaofed.org/blog/2015/11/04/mobile-rem-problem/
3.http://caibaojian.com/web-app-rem.html
