页面布局单位计算 一般有两大类：绝对长度单位和相对长度单位
绝对长度单位：
-
- px 像素：是显示屏上显示的每一个小点，为显示的最小单位
- in 英寸，1in = 96px
- cm 厘米，1cm = 37.8px
- mm 毫米，1mm = 3.78px
- pt 磅，1pt = 1/72 英寸
推荐使用 px（像素）
相对长度单位：
-
- em 相对于当前元素的字体大小(font-size) ,当前元素未设置字体大小依赖其父元素字体大小一级级向上查找 1em= 1 × 当前元素字体大小;
- rem 相对于根元素的字体大小(font-size),计算公式 1rem =1 × 根元素字体大小;
- % 目标元素宽度/父级元素宽度=百分比宽度 ;
- ex & ch 相对于元素字符字体宽高
- ex
取自字符x的高度 - ch 基于'0'这个字符字体的宽度计算
- ex
- vw & vh 根据 视口(浏览器可视化的区域) 的宽高计算
- vw 当前视窗宽度的
1% - vh 当前视窗高度的
1%
- vw 当前视窗宽度的
vmin & vmax当前vw和vh中较小或者较大的值
目前 IE8一下不支持 rem,IE9,10部分不支持
如果这个属性根据它的font-size进行测量，则使用em
其他的视情况使用对应单位.
rem 几种方法:
js计算
1 <script> 2 /*让文字和标签的大小随着屏幕的尺寸变化 等比缩放*/ 3 var html = document.getElementsByTagName('html')[0]; 4 5 /*取到屏幕的宽度*/ 6 var width = window.innerWidth; 7 var fontSize = 100/640*width; 8 html.style.fontSize = fontSize +'px'; 9 window.onresize = function(){ 10 var html = document.getElementsByTagName('html')[0]; 11 12 var width = window.innerWidth; 13 14 var fontSize = 100/640 * width; 15 /*设置fontSize*/ 16 html.style.fontSize = fontSize +'px'; 17 } 18 </script>
使用媒体查询:
@media (max-width:768px){ html { font-size:16px; } }
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
