博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端开发,几个你可能不知道的CSS单位属性。
阅读量:4319 次
发布时间:2019-06-06

本文共 821 字,大约阅读时间需要 2 分钟。

1. rem

"em" 单位是我们开发中比较常用到的,它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小;“rem” 中的 “r” 代表 “root”,它表示以(即“html”)元素的单位大小为基准来设置当前元素的单位大小,所以不管当前元素是任意子节点,一旦设单位大小为 “rem” 那么这个元素大小都是以根元素单位为参考的,这里的 “em” 和 “rem” 均具有继承性

2. vwvh(移动端开发个人最喜欢的单位属性,也是这次介绍的重点)

传统的响应式开发中,我们常常用百分比来布局,然而这并不是最好的解决方案。例如,你没有办法以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

这两个单位在我们平时开发中会很少用到,这里就不做详细的阐述了。下面就放一张图解释这两个单位的含义,若是有兴趣的朋友的可以自己查一下资料。

 

转载于:https://www.cnblogs.com/mylove103104/p/4584779.html

你可能感兴趣的文章
window自动任务实现数据库定时备份
查看>>
Windows 7 Ultimate(旗舰版)SP1 32/64位官方原版下载(2011年5月12日更新版)
查看>>
javascript操作cookie
查看>>
深入理解HTTP协议(转)
查看>>
NHibernate讲解
查看>>
剑指offer-二叉树中和为某一值的路径
查看>>
spark算子
查看>>
(转)Linux服务器SNMP常用OID
查看>>
USB各种模式 解释
查看>>
数据访问-----ADO.NET 小结和练习
查看>>
Linux lsof详解
查看>>
子组件给父组件传数据
查看>>
unix/linux下的共享内存、信号量、队列信息管理
查看>>
Hilbert先生旅馆的故事
查看>>
采访吴岳师兄有感 by 王宇飞
查看>>
LVS简略介绍
查看>>
hdu 1021 Fibonacci Again
查看>>
JVM架构_XmnXmsXmxXss有什么区别:转
查看>>
PHPExcel 使用心得
查看>>
洛谷 P3374 【模板】树状数组 1(单点加,区间和)
查看>>