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

需求：

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. 【Effective Java】2、构造参数过多的时候

    package cn.xf.cp.ch02.item2; /** * * 功能:当我们的构造参数有很多,超出可控范围的时候,用build模式 时间:下午8:25:05 文件:NutritionFact ...

  2. LinQ实战学习笔记(三) 序列,查询操作符,查询表达式,表达式树

    序列 延迟查询执行 查询操作符 查询表达式 表达式树 (一) 序列 先上一段代码, 这段代码使用扩展方法实现下面的要求: 取进程列表,进行过滤(取大于10M的进程) 列表进行排序(按内存占用) 只保留 ...

  3. ADO.NET 增删改查的基本用法

    ADO.NET:数据访问技术 就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中也可以将数据库中的数据提取到内存中供程序调用 所有数据访问技术的基础 连接 ...

  4. JavaScript基础10——node对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Android启示录——开始Android旅途

    为了明年可以开始进行android程序开发,开始从零开始学习android,仅以此代表第一步开始(*^_^*),开始搭建环境…… 1. 软件下载 http://developer.android.co ...

  6. Atitit. Xss 漏洞的原理and应用xss木马

    Atitit. Xss 漏洞的原理and应用xss木马 1. XSS漏洞1 2. XSS的用途2 2.1. 盗取cookie2 2.2. 刷新流量 刷分3 2.3. DOS 窃取隐私”.“假冒身份”. ...

  7. MX4连接后adb无法识别解决方法

    1. 使用android SDK目录中的 android SDK目录\tools 下的android脚本,命令行中执行 android update adb,成功运行后,会在用户名录下产生,C:\Us ...

  8. CSS 包含选择器(九)

    一.包含选择器 包含选择器中前后两部分之间以空格隔开,根据左侧选择符指定的祖先元素,然后在该元素下寻找匹配右侧的选择侧符的下级元素 定义包含选择器时,必须保证在HTML结构中第一个对象能够包含第二个对 ...

  9. Enterprise Library +Caliburn.Micro+ＷＰＦ CM框架下使用企业库验证,验证某一个属性,整个页面的文本框都变红的原因

    我用的是CM这个框架做的WPF,在用企业库的验证的时候,我用标签的方式给一个属性加了不能为空的验证,但整个页面的所有控件的外面框都变红了.原因是CM框架的绑定方式是直接X:Name="你的属 ...

  10. UI交互设计的网站

    1.http://www.xueui.cn/other-tutorials/ui-interaction-design.html 2.http://www.3lian.com/edu/2015/12- ...