码迷,mamicode.com
首页 > Web开发 > 详细

响应式布局中的CSS相对量

时间:2017-04-23 23:12:11      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:浏览器   计算方法   百分比   图片   兼容性   

一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格。
在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的。例如,常见的响应式布局中需要用到“自适应的图片”、“流动布局”等技术。

体现在 CSS 代码编写上,就需要前端开发人员精准掌握特定属性的相对量表示方法。
然而,其中一些相对量的计算方法很容易混淆。

本文在完整梳理全部 CSS 属性基础上,将其中的“相对单位、百分比相对量、数字相对量”清晰的罗列出来。
进而为后续的响应式设计编码提供依据。

值得注意的是,百分比相对量十分容易混淆,不同 CSS 属性的百分比值的计算方法不同,
有的相对于父元素、有的相对于包围盒、有的相对于其他属性、有的相对于宽度、有的相对于高度,细节千差万别。

CSS 属性的浏览器兼容性,请查询 Can I Use
已经被标准废弃(Deprecated)的属性,没有列出。
欢迎您与我一同完善这个清单,提供数据的读者姓名将在文中标注。
(通过评论方式提供遗漏的相对量)

一、相对单位和量

视口单位 (viewport)

vh:视口高度的 1/100
vw:视口宽度的 1/100
vmin:视口宽度、高度中最小值的 1/100
vmax:视口宽度、高度中最大值的 1/100

字体单位

em:元素 font-size 的大小,如果在 font-size 属性使用 em,则 em 表示该元素继承下来的 font-size 大小。
rem:根元素 <html> 的font-size 大小。如果 rem 用在根元素的 font-size 上,则 1 rem 表示根元素 font-size 的初始值。

<position>:偏移量的百分比是相对于元素盒的宽度、高度。水平方向(x轴)的百分比相对于元素盒的宽度。竖直方向(y轴)的百分比相对于元素盒的高度。

函数

rgb/rgba:RGB 三个通道,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。Alpha 通道,a = 0表示透明,a = 1 表示不透明。

hsl/hslas 通道表示饱和度,取值范围是 0 - 100%。l 通道表示亮度,取值范围是 0 - 100%。Alpha 通道,a = 0表示透明,a = 1 表示不透明。

二、数字相对量

小数相对量指的是 CSS 规范中的<number>量(查看 MDN 规范)。
整数相对量指的是 CSS 规范中的<integer>量(查看 MDN 规范)。

小数相对量

font-size-adjust(CSS3):设置小写x字母的高度。计算方法为指定的 数字值 乘以 font-size。
zoom:数字值指的是缩放引子自己。

整数相对量

border-image-width:指的是元素 border-width 计算值的倍数。

三、百分比相对量

百分比相对量指的是 CSS 规范中的<percentage>量(查看 MDN 规范)。

许多长度属性使用百分比,例如

  • width、height

  • max-height/min-height、max-width/min-width

  • margin

  • padding

  • font-size

  • border-width

  • text-shadow

  • background-size

  • background-position

  • top、bottom、left、right

  • line-height

  • text-indent

  • vertical-align

注意:只有计算后的属性会被继承。当一个父属性使用百分比时,在继承属性(子属性)上会计算父属性的通过百分比计算后的实际值,不会将百分比继承下来。

“定位”属性

top/bottom:在top属性中,使用 % ,表示相对于_包含块_的高度百分比。可以为负值。
right/left:表示相对于_包含块_的宽度百分比。可以为负值。

“弹性盒模型”属性

查看弹性盒模型

flex-basis:百分比指的是 flex 容器的内部主尺寸(inner main size)的百分比。
即,a percentage of the parent flex container main size property

min-height/min-width:初始值为0。

“尺寸”属性

width/max-width/min-width:指的是_包含块_的宽度百分比。如果包含块的宽度依赖本元素宽度,则布局结果未定义。

height/max-height/min-height:指的是元素生成盒(generated box)的_包含块_(containing block)的高度。如果包含块的高度没有显式指定(依赖于内容高度),并且本元素没有绝对定位,则 height 值计算为 auto,max-height 值计算为 none,min-height 值计算为 0。根元素的百分比高度相对于根元素的初始包含块。

“外边距”属性

margin:指的是_包含块_的宽度百分比。可以是负值。
margin-top/margin-bottom:指的是_包含块_的宽度百分比。
margin-left/margin-right:指的是_最近包含块_的宽度百分比。

“内边距”属性

padding:指的是_包含块_的宽度百分比。
padding-top/padding-bottom:指的也是_包含块_的宽度百分比。
padding-left/padding-right:指的也是包含块的宽度百分比。

“边框”属性

border-image:缩写形式,其中的 border-image-slice、border-image-width 有百分比设置。border-image 的详细用法,请参考这里
border-image-slice:可以制定最多4个值,其中的某个值的百分比指的是相对于图片尺寸的百分比。
border-image-width:指的是边界图像区域(border image area)的尺寸百分比。将要绘制边界图像的整个区域称为边界图像区域。border-image-width属性用于缩放 border-image-slice。

技术分享

border-radius:指的是圆形半径或椭圆形的长半轴、短半轴。水平方向的轴的百分比值对应边界盒(border box)的宽度。垂直方向的轴的百分比值对应边界盒(border box)的高度。
border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius:圆角水平轴的值对应边界盒的宽度。圆角垂直轴的值对应边界盒的高度

“背景”属性

background:缩写中的属性值分别对应各自的百分比意义。如 background-position、background-size。
background-position:百分比指的是背景定位区域的尺寸减去背景图片的尺寸。这里的尺寸指的是,水平偏移的宽度或者垂直偏移的高度。
background-size:百分比值相对于背景定位区域。background-size用于确定背景图片的大小。

“字体”

font缩写,百分比值用于设置 font-size 分量,含义与 font-size 相同。
font-size:百分比值相对于父元素的 font-size 值。
line-height:百分比值相对于元素自身的 font-size 值。

“文本”

text-indent:百分比值相对于元素包围盒(the containing block)的宽度。
word-spacing:百分比值相对于受影响文字(glyph)宽度。
vertical-align:百分比值相对于元素自身的 line-height 属性值。

“用户界面”

zoom:百分比值指的是缩放引子自己。

“2D变换” (实验)

transform:百分比值相对于包围盒(bounding box)尺寸。
transform-origin:百分比值相对于包围盒(bounding box)尺寸。


响应式布局中的CSS相对量

标签:浏览器   计算方法   百分比   图片   兼容性   

原文地址:http://zhanglida66.blog.51cto.com/12834458/1918631

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!