Rem实现自适应初体验_html/css_WEB-ITnose
需求:
1.实现基本的触屏轮播图效果
2.传入非标准比例的图片,可以自动平铺(有时候图片可能比例略有偏差,当然例子里的图是随便找的,平铺之后不能看呀)
3.轮播图模块能实现自适应,按照固定高宽比显示,比如3:10的高宽比
一、初识rem
那么这个需求的难点在哪里呢?其实就是我需要限定图片的宽高,但是又要保证自适应
如果只考虑前者:
.swiper-container { width: 100%; height: 100px;}
但是这样高度就固定了。最后决定使用Rem这个相对单位 详细内容可参加 www.w3cplus.com/css3/define-font-size-with-css3-rem
我的理解 rem就是以
元素的font-size作为单位的相对单位。如果根元素的font-size是20px,那个1rem就是20px。那么只要根据设备的分辨率改变根元素的font-size就可以实现页面内各元素的自适应
那么现在就应该改写成
.swiper-container { width: 100%; height: 5rem;}
二、自动更改
的font-size一种方案是采用媒体查询的方式设置主流的分辨率下的font-size
加入这么一段js,就可以根据屏幕的宽度动态改变font-size
根据这一句 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 可知
iphone4宽度是320px,那么font-size就是20px, 100px就是5rem
iphone6宽度是375px,那么font-size就是23.4375px,100px就是4.267rem
三、自动化转换px到rem
那写css的时候,难道又要这么去换算么,我不是心算小王子呀。特别是当设计稿是按照iphone6来的时候
这时候就用上sublime text的插件cssrem了 github.com/flashlizi/cssrem
这样就可以安心的按px写,然后一回车转换成rem啦
事实证明效果拔群呢
由于是公司项目,就不放效果图啦,希望对大家有一点点帮助咯
推荐阅读
-
[转]CSS3 Media Query实现响应布局_html/css_WEB-ITnose
-
CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码_html/css_WEB-ITnose
-
EasyUI DataGrid结合ThinkPHP实现增删改查操作初学者_html/css_WEB-ITnose
-
用if条件语句来实现浏览器兼容简单介绍_html/css_WEB-ITnose
-
DIV+CSS三列式布局的实现方法_html/css_WEB-ITnose
-
请问如何实现table的外框和内框线的粗度不同??_html/css_WEB-ITnose
-
使用checkbox实现纯CSS下拉框_html/css_WEB-ITnose
-
纯CSS3实现彩色缎带效果_html/css_WEB-ITnose
-
纯css实现苹果表盘动画_html/css_WEB-ITnose
-
【CSS】纯CSS实现三级导航(模板)_html/css_WEB-ITnose