本周汇总 动态rem适配移动端/块状元素居中/透明度
2016-06-12 09:44
621 查看
1、动态rem适配移动端
width/10是为了保证10rem占宽满屏,不除的话,1rem就等于屏幕宽度了。然后我们只需要动态加上上面的js代码,就不需要做各种媒体查询就能适配各种设备宽度。
2、块状元素居中
上图代码显示用绝对定位,top,left50%,然后负margin宽高的一半,light-height为元素的高就能实现垂直居中。相信大家都知道,但是有个问题,如果元素的宽高变了,那我们也要手动的去改margin。这里有一个更方便的办法,如果不考虑IE低版本的浏览器的情况下,可以用translate来实现,这样无论元素怎么变,都不会有影响。
3、透明度
一个块级元素你使用了opacity来做透明度的话,它会使子元素跟着也透明,即使子元素设置不透明。同样的,上代码
解决办法是使用rgba来做透明度,它将不会影响其子元素(完美)!
4、display:inline-block 4像素问题
(chrome 下是8像素)父元素 加 font-size:0,子元素设置font-size:N px;
这种方法不兼容Safari,在父元素中设置font-size:0,用来兼容chrome,而使用letter-space:-N px来兼容safari:
!function(){ var width = document.documentElement.clientWidth; var head=document.getElementsByTagName("head")[0]; var style=document.createElement("style"); style.innerHTML="html{font-size:"+width/10+"px;}"; head.appendChild(style); }()
width/10是为了保证10rem占宽满屏,不除的话,1rem就等于屏幕宽度了。然后我们只需要动态加上上面的js代码,就不需要做各种媒体查询就能适配各种设备宽度。
2、块状元素居中
上图代码显示用绝对定位,top,left50%,然后负margin宽高的一半,light-height为元素的高就能实现垂直居中。相信大家都知道,但是有个问题,如果元素的宽高变了,那我们也要手动的去改margin。这里有一个更方便的办法,如果不考虑IE低版本的浏览器的情况下,可以用translate来实现,这样无论元素怎么变,都不会有影响。
3、透明度
一个块级元素你使用了opacity来做透明度的话,它会使子元素跟着也透明,即使子元素设置不透明。同样的,上代码
解决办法是使用rgba来做透明度,它将不会影响其子元素(完美)!
4、display:inline-block 4像素问题
(chrome 下是8像素)父元素 加 font-size:0,子元素设置font-size:N px;
ul { list-style: none outside none; padding: 10px; text-align: center; font-size: 0px; } ul li { display: inline-block; *display: inline; zoom: 1; padding: 5px; font-size: 12px; }
这种方法不兼容Safari,在父元素中设置font-size:0,用来兼容chrome,而使用letter-space:-N px来兼容safari:
ul { letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/ word-spacing: -4px; font-size: 0; } ul li { font-size: 16px; letter-spacing: normal; word-spacing: normal; display:inline-block; *display: inline; zoom:1; }
相关文章推荐
- 下拉刷新(Android开源项目)
- 7、Zabbix微信告警
- Android热点连接管理(二)
- iOS动画学习笔记1 Video Tutorial iOS Animation with Swift - Ray Wenderlich
- android事件分发机制及冲突处理
- 打造属于你的LayoutManager
- 如何提高码农产量,基于ASP.NET MVC的敏捷开发框架之移动端开发随笔二
- IPv6介绍及程序支持IPv6的障碍
- 关于 iOS socket 都在这里了
- Appium+Robotframework实现Android应用的自动化测试-5:RIDE中AppiumLibrary的配置
- iOS教你轻松打造瀑布流Layout
- iOS 独立开发记录(下)
- iOS 独立开发记录(上)
- Appium+Robotframework实现Android应用的自动化测试-4:AppiumLibrary介绍和安装
- 【代码笔记】iOS-通过颜色来生成一个纯色图片
- Android WebView页面重定向问题
- 【代码笔记】iOS-通过颜色来生成一个纯色图片
- Appium+Robotframework实现Android应用的自动化测试-3:一个必不可少的工具介绍
- Swift 算法实战之路:基本语法与技巧
- web.xml中webAppRootKey