<!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

rem测试用实现移动端自适应页面的更多相关文章

  1. 使用rem设计移动端自适应页面三（转载）

    使用rem 然后根据媒体查询实现自适应.跟使用JS来自适应也是同个道理,不过是js更精确一点.使用媒体查询: html { font-size: 62.5% } @media only screen ...

  2. 使用rem设计移动端自适应页面一（转载）

    1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...

  3. rem实现移动端自适应页面

    一.把px转换成rem方案 1.cssrem插件 2.css预处理器 3.rem-unit插件 4.px2rem插件 rem就是相对于根元素的font-size来做计算,设置好根结点字体大小,子节点用 ...

  4. 使用rem设计移动端自适应页面二（转载）

    由于日常需求以无线居多,所以可以在业务中做一些尝试,如 rem,刚接触这个特性的时候,曾经一度爱不释手,仿佛在无线开发的坎坷路上寻找到一条捷径.然而随着使用范围的扩大,慢慢的发现了一些使用 rem 带 ...

  5. vw实现移动端自适应页面

    一.设备支持情况 测试网站:https://caniuse.com/#search=vw css3test:https://airen.github.io/css3test/,https://gith ...

  6. 使用rem配置PC端自适应大屏

    效果如下 使得大屏不论在什么宽高比例依然能展示全部数据 安装 npm install -S postcss-pxtorem rem配置思路 原先的rem函数是能解决大部分的问题的,如果展示不全,也可以 ...

  7. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  8. rem 结合 scss 移动端自适应 初级入门demo

    首先说明 本篇 内容 适合初级使用 rem 开发移动端 自适应 公式计算 推导过程, 高手绕路. 目标尺寸 = rem  *  根字体大小 Px   =  rem * (html根字体px) 根字体大 ...

  9. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

随机推荐

  1. js之第三方工具解析JSON

    1.JSON 仅仅是一种文本字符串.它被存储在 responseText 属性中 为了读取存储在 responseText 属性中的 JSON 数据,须要依据 JavaScript 的 eval 函数 ...

  2. 海哥：T2C时代的到来了，那么什么叫T2C？

    昨天写了一篇文章叫做<我为什么选择家具行业,以及T2C概念的创办>,地址:http://user.qzone.qq.com/198819880/blog/1414399801 ,里面提到了 ...

  3. 一个sql的优化

    原文:一个sql的优化 目的:为了查询某天某个服务器上的登录id的个数   刚开始编写的sql: select count(a.mac) logusers from Log_MacLogin_All ...

  4. C# .net基于Http实现web server(web服务)

    原文:C# .net基于Http实现web server(web服务) 什么是 web server?  百度百科是这么解释的: Web Server中文名称叫网页服务器或web服务器.WEB服务器也 ...

  5. Notepad++ 经常使用快捷键 (MEMO）

    最近的一项研究Lua,使用Notepad++ 作为编译器. 今天早上无意中按下 Ctrl+D ,.突然认为Notepad++ 这东西非常奇妙. 网上查找了Notepad++的快捷键,尝试 Ctrl+Q ...

  6. Linux访问Windows共享文件夹 (转)

    在开发Linux程序中,经常会使用Windows的编辑器进行编辑,这样还要拷贝到Linux服务器,如果有这种开发习惯的同学,可以使用这种方式进行开发. 当然除了这种方法之外,可以再Windows安装n ...

  7. [WF4.0 实战] WPF + WCF + WF 打造Hello World（基础篇）

    本篇博客是一个基础的演示样例,也就是一个新手教程吧!让大家熟悉一下WPF + WCF + WF三者的关系!这仅仅是一个基础篇,下篇会继续深入,作为这段时间研究工作流的一个小小总结! 三者关系: WPF ...

  8. js isArray小结

    原文:[转载]js isArray小结 在日常开发中,我们经常需要判断某个对象是否是数组类型的,在js中检测对象类型的常见的方法有几种: 1.typeof操作符.对于Function.String.N ...

  9. 微信公众平台企业号验证接口、回调 PHP版

    微信公众平台企业号验证接口.回调 PHP版,本人为了解决这个企业号的验证和发送消息的问题,整整研究了几天时间,由于微信企业号刚推出来,网上资料太少了!后来在一些朋友的帮助下和本人重复调试完好下,最终整 ...

  10. android--解--它们的定义tabhost（动态添加的选项+用自己的主动性横向滑动标签+手势切换标签页和内容特征）

    在本文中,解决他们自己的定义tabhost实现,并通过代码集成动态加入标签功能.自己主动标签横向滑动功能.和手势标签按功能之间切换. 我完成了这个完美的解决方案一起以下: 1.定义tabwidget布 ...