移动端开发,几个你可能不知道的CSS单位属性。
2015-06-18 01:59
501 查看
1. rem
"em" 单位是我们开发中比较常用到的,它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小;“rem” 中的 “r” 代表 “root”,它表示以根(即“html”)元素的单位大小为基准来设置当前元素的单位大小,所以不管当前元素是任意子节点,一旦设单位大小为 “rem” 那么这个元素大小都是以根元素单位为参考的,这里的 “em” 和 “rem” 均具有继承性。
2. vw 和 vh(移动端开发个人最喜欢的单位属性,也是这次介绍的重点)
传统的响应式开发中,我们常常用百分比来布局,然而这并不是最好的解决方案。例如,你没有办法以body的高度来设置百分比。
"vw" 的全称是 “viewport width” 即视窗的宽度;"vh" 的全称是 “viewport height” 即视窗的高度。
1vw = viewportWidth * 1/100; 1vh = viewportHeight * 1/100;
所以元素使用 “vw” “vh” 作为宽度和高度单位,即可以保证适配不同的设备。
3. vmin 和 vmax
“vmin” 即 “viewport” 宽度和高度相比较最小的那一个。(也就是说,如果当前元素单位设置了 “vmin” 那么浏览器会去判断宽度和高度的大小,然后继承小的值)
“vmax” 同理,继承宽高比较,大的那一个值;即,宽和高谁大,就继承谁的值。
这里我们假设:浏览器的宽度为1300px,高度为960px;
50vmin = 960 * (50/100);
50vmax = 1300 * (50/100);
4. ex 和 ch
这两个单位在我们平时开发中会很少用到,这里就不做详细的阐述了。下面就放一张图解释这两个单位的含义,若是有兴趣的朋友的可以自己查一下资料。
"em" 单位是我们开发中比较常用到的,它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小;“rem” 中的 “r” 代表 “root”,它表示以根(即“html”)元素的单位大小为基准来设置当前元素的单位大小,所以不管当前元素是任意子节点,一旦设单位大小为 “rem” 那么这个元素大小都是以根元素单位为参考的,这里的 “em” 和 “rem” 均具有继承性。
2. vw 和 vh(移动端开发个人最喜欢的单位属性,也是这次介绍的重点)
传统的响应式开发中,我们常常用百分比来布局,然而这并不是最好的解决方案。例如,你没有办法以body的高度来设置百分比。
"vw" 的全称是 “viewport width” 即视窗的宽度;"vh" 的全称是 “viewport height” 即视窗的高度。
1vw = viewportWidth * 1/100; 1vh = viewportHeight * 1/100;
所以元素使用 “vw” “vh” 作为宽度和高度单位,即可以保证适配不同的设备。
3. vmin 和 vmax
“vmin” 即 “viewport” 宽度和高度相比较最小的那一个。(也就是说,如果当前元素单位设置了 “vmin” 那么浏览器会去判断宽度和高度的大小,然后继承小的值)
“vmax” 同理,继承宽高比较,大的那一个值;即,宽和高谁大,就继承谁的值。
这里我们假设:浏览器的宽度为1300px,高度为960px;
50vmin = 960 * (50/100);
50vmax = 1300 * (50/100);
4. ex 和 ch
这两个单位在我们平时开发中会很少用到,这里就不做详细的阐述了。下面就放一张图解释这两个单位的含义,若是有兴趣的朋友的可以自己查一下资料。
相关文章推荐
- unity5,UI Button too small on device than in Game View解决办法
- Android Studio project消失,project被清空
- WinForm修改App.config配置文件功能
- Android知识总结(一)
- 微信jsapi-java初步接入
- android json解析及简单例子
- IOS badgeValue和applicationIconBadgeNumber
- android单元测试获取toast代码
- appium代码
- android ndk使用Javah命令生成JNI头文件
- cocos2dx 注册lua回调到c++
- 【Unity快速实现小功能】实现摄像机跟随角色移动功能
- android手机坐标系,原来我一直都没理解透
- Android-Material Design详解(动画篇)
- 微信开发模式学习日记(1)
- <Android>在Activity被非正常杀死并重建时,使用savedInstanceState进行数据恢复的简单实例
- 【Unity实用小技巧】设置动画模型循环播放
- 简单的iOS开发实例
- Android实现简单计算器功能(Button控件实现)
- Android基础教程之简单的Button事件响应综合提示控件Toast的应用