Rem实现自适应初体验
第一次做移动端的页面,遇到的第一个问题就是移动端的轮播图。其实轮播图的插件有很多,但是完全满足需求的并不容易找。
需求:
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啦
事实证明效果拔群呢
由于是公司项目,就不放效果图啦,希望对大家有一点点帮助咯
最新文章
- microsoft docx document operation with Java POI library
- 如何在自己的代码中实现分享视频文件或者是图片文件到微信 QQ微博 新浪微博等!!!
- 算法与数据结构(2)--英雄会第三届在线编程大赛:几个bing
- PHP检测终端设备是平板、手机还是电脑
- 怎么录制Android或IOS动画教程
- HDU 1166敌兵布阵+NOJv2 1025: Hkhv love spent money(线段树单点更新区间查询)
- 由Tencent://Message协议想到的一个解决方案
- Javascript 面向对象编程
- 关于Java多态的总结.
- DoTween学习笔记(二) UGUI结合使用(实现一些简单效果)
- MFC的最大化,最小化,关闭
- Centos7.0 安装 oracle 11g 以及相关问题解决
- [图像类名词解释][ RGB YUV HSV相关解释说明]
- C++—模板(2)类模板与其特化
- QWebView加载网页
- jbe 可以用来修改Java class的字节码,配合jd-gui 使用
- git权限
- python操作三大主流数据库(14)python操作redis之新闻项目实战②新闻数据的展示及修改、删除操作
- Nginx web服务器
- mysql_提示 Lock wait timeout exceeded解决办法
热门文章
- [moka同学笔记]yii2场景的使用(摘录)
- Python基础(二),Day2
- Vue基础理论
- SharePoint 2013 创建web应用程序报错";This page can’t be displayed";
- Mybatis学习记录(三)----理解SqlMapConfig.xml文件
- 升级sp1后文档无法编辑
- Android-BaseLine基础性开发框架
- linux网络流量实时监控工具之iptraf
- IOS中(Xcode) DEBUG模式(RELEASE模式)控制NSLog输出,NSLog两种不同情况的输出方式
- 二叉堆(binary heap)