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

需求：

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. 机器学习实战 - 读书笔记(14) - 利用SVD简化数据

    前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第14章 - 利用SVD简化数据. 这里介绍,机器学习中的降维技术,可简化样品数据. 基 ...

  2. php生成静态文件

    1,通用生成方法 //获取文件内容 $content=file_get_contents("http://www.google.com/" ); $id=110; $filenam ...

  3. centos 7安装mysql报错-bash: ./scripts/mysql_install_db: /usr/bin/perl: bad interpreter: No such file or directory

    [root@localhost mysql]# ./scripts/mysql_install_db  --user=mysql -bash: ./scripts/mysql_install_db: ...

  4. Android5.0新特性——Material Design简介

    Material Design Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干 ...

  5. Jquery学习—jquery的事件

    1.Jquery事件1:one 1)one() 方法是为所选的元素绑定一个仅出发一次的处理函数,调用格式 one(type,[data],fn) 2)其中参数type是事件类型,即需要触发什么类型的事 ...

  6. CSS3中的calc()

    什么是calc()? calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能; MDN的解释为可以用在任何长度,数值,时间,角度,频率等处; /* property: calc ...

  7. NDK、SDK以及JNI的关系

    最近由于项目的需要,使用到了Android的NDK技术,对项目核心算法跨平台的移植.简答而言,就是使用C对原来的算法进行了改进,并集成到原 来的app项目里. 从前的项目一直没有使用NDK进行开发的机 ...

  8. android network develop(3)----Xml Parser

    Normally, there are three type parser in android. Xmlpullparser, DOM & SAX. Google recomand Xmlp ...

  9. Effective Java 39 Make defensive copies when needed

    Principle It is essential to make a defensive copy of each mutable parameter to the constructor. Def ...

  10. nginx设置反向代理后，页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...