第一次做移动端的页面，遇到的第一个问题就是移动端的轮播图。其实轮播图的插件有很多，但是完全满足需求的并不容易找。

需求：

1.实现基本的触屏轮播图效果

2.传入非标准比例的图片，可以自动平铺（有时候图片可能比例略有偏差，当然例子里的图是随便找的，平铺之后不能看呀）

3.轮播图模块能实现自适应，按照固定高宽比显示，比如3：10的高宽比

一、初识rem

那么这个需求的难点在哪里呢？其实就是我需要限定图片的宽高，但是又要保证自适应

如果只考虑前者：

.swiper-container {

    width: 100%;

    height: 100px;

}

但是这样高度就固定了。最后决定使用Rem这个相对单位 详细内容可参加 www.w3cplus.com/css3/define-font-size-with-css3-rem

我的理解 rem就是以<html>元素的font-size作为单位的相对单位。如果根元素的font-size是20px，那个1rem就是20px。

那么只要根据设备的分辨率改变根元素的font-size就可以实现页面内各元素的自适应

那么现在就应该改写成

.swiper-container {

    width: 100%;

    height: 5rem;

}

二、自动更改<html>的font-size

一种方案是采用媒体查询的方式设置主流的分辨率下的font-size

我参考了一篇博客里的方法 原文：www.duanliang920.com/learn/web/html5/316.html

 <script>

        (function (doc, win) {

            var docEl = doc.documentElement,

            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

            recalc = function () {

            var clientWidth = docEl.clientWidth;

            if (!clientWidth) return;

            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

        };

        if (!doc.addEventListener) return;

        win.addEventListener(resizeEvt, recalc, false);

        doc.addEventListener('DOMContentLoaded', recalc, false);

        })(document, window);

 </script>

加入这么一段js，就可以根据屏幕的宽度动态改变font-size

根据这一句 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';  可知

iphone4宽度是320px，那么font-size就是20px, 100px就是5rem（要注意设计稿，像我拿到的设计稿是iphone6尺寸的，那么是2倍图，量出来的100px，在css中是50px实现的，就是2.5rem了）

iphone6宽度是375px，那么font-size就是23.4375px,100px就是4.267rem

三、自动化转换px到rem

那写css的时候，难道又要这么去换算么，我不是心算小王子呀。特别是当设计稿是按照iphone6来的时候

这时候就用上sublime text的插件cssrem了  github.com/flashlizi/cssrem

这样就可以安心的按px写，然后一回车转换成rem啦

事实证明效果拔群呢

由于是公司项目，就不放效果图啦，希望对大家有一点点帮助咯

Rem实现自适应初体验的更多相关文章

  1. 【全面解禁!真正的Expression Blend实战开发技巧】第七章 MVVM初体验-在DataGrid行末添加按钮

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第七章 MVVM初体验-在DataGrid行末添加按钮 博客更新较慢,先向各位读者说声抱歉.这一节讲解的依然是开发中经常遇到的一种 ...

  2. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

  3. Xamarin+Prism开发详解四：简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  4. Spring之初体验

                                     Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...

  5. Xamarin.iOS开发初体验

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0

  6. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  7. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  8. 在同一个硬盘上安装多个 Linux 发行版及 Fedora 21 、Fedora 22 初体验

    在同一个硬盘上安装多个 Linux 发行版 以前对多个 Linux 发行版的折腾主要是在虚拟机上完成.我的桌面电脑性能比较强大,玩玩虚拟机没啥问题,但是笔记本电脑就不行了.要在我的笔记本电脑上折腾多个 ...

  9. 百度EChart3初体验

    由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...

随机推荐

  1. MAC OS设置JDK小结

    开始折腾mac pro,在网上找了些资料,自己也尝试了一下,特在这里做个小结. mac中JDK的位置 OSX默认的JDK /System/Library/Frameworks/JavaVM.frame ...

  2. sso demo ( cas )

    1. generate keystore command : keytool -genkey -alias testtomcat -keyalg RSA -keystore "C:\User ...

  3. ASP.NET WebAPI 12 Action的执行

    Action的激活大概可以分为如下两个步骤:Action对应方法的调用,执行结果的协商.在WebAPI中由HttpActionInvoker(System.Web.Http.Controllers)进 ...

  4. mybatis 下划线转驼峰配置

    一直以来,在sqlmap文件中,对于数据库中的下划线字段转驼峰,我们都是通过resultmap来做的,如下: <resultMap id="ISTableStatistics" ...

  5. java响应微信用户信息（wechat4j）

    你的微信应用程序接收到用户发送的消息事件之后,可以进行响应.wechat4j支持多种消息的响应. wechat4j响应消息的部分在wechat4j的入口WechatSupport.java中定义,直接 ...

  6. ElasticSearch实战使用

    注意:以下命令都是使用sense测试(ElasticSearch第二步-CRUD之Sense),且数据都已经使用过IK分词. 以下测试数据来源于文档(db_test/person) 需要注意的是下面的 ...

  7. SAPScript、Smartforms动态打印图像或者背景图片

    在利用 SMARTFORMS 进行打印的时候有时候要求输出的图片可能是随着打印内容的不同而不同了,也就是动态输出图片,SMARTFORMS的提供了相关的支持技术,下面是实现截图 1.创建要显示的图片 ...

  8. SharePoint 门户添加内网域名

    原理:在DNS服务器上,添加一条SharePoint门户所在主机的别名,当我们在浏览器里访问这个别名的时候,会自动到Dns去解析,解析出来这台主机,从而访问到我们的SharePoint门户. 1.打开 ...

  9. python多线程ssh爆破

    python多线程ssh爆破 Python 0x01.About 爆弱口令时候写的一个python小脚本,主要功能是实现使用字典多线程爆破ssh,支持ip表导入,字典数据导入. 主要使用到的是pyth ...

  10. Sizing and Capacity Planning for SharePoint 2013 - Resources

    http://blogs.msdn.com/b/sanjaynarang/archive/2013/04/06/sizing-and-capacity-planning-for-sharepoint- ...