ASTRO轻应用 ASTROZERO-AstroZero高级页面概述:响应式组件开发基本原则

时间：2024-12-18 16:27:25

ASTRO轻应用 ASTROZERO 高级页面

响应式组件开发基本原则

组件的响应式设计，是高级页面适配多终端的重要前提。为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式设计的基本原则。

根据内容设计

不专注于特定屏幕宽度，而是专注于内容设计，当屏幕越小或浏览器窗口越窄时，内容所占的垂直高度越来越多，内容就要向下方自然延伸。建议从小屏幕开始，逐步设置断点（例如设备宽度320px、768px、1024px），针对不同设备进行设计，形成流动布局。

针对复杂情况，可以使用 CSS 3的@media查询。针对不同的终端类型和不同屏幕分辨率的设备，定义不同样式，选择应用不同的 CS S规则。只有当该设定媒体查询与正在使用的设备匹配时，其对应的CSS规则才起作用。

CSS语法如下：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

其中，参数说明如表1所示。

表1 @media语法参数说明
参数	值	说明
mediatype	all	用于所有设备。
	screen	用于电脑屏幕、平板电脑、智能手机等。
	print	用于打印机和打印预览。
media feature	aspect-ratio	定义输出设备中，页面可见区域宽度与高度的比率。
	max-width	定义输出设备中，页面最大可见区域的宽度。
	max-height	定义输出设备中，页面最大可见区域的高度。
	min-width	定义输出设备中，页面最小可见区域的宽度。
	min-height	定义输出设备中，页面最小可见区域的高度。

设置示例：对页面宽度不同的设备，设定不同背景颜色。

/*媒体查询*/
/*页面宽度大于1200px 时，背景颜色为蓝色，主要用于大屏设备*/
@media screen and (min-width: 1200px) {
    body {
        background-color:blue;
    }
}
/*页面宽度在992px和1200px之间，背景颜色为红色，用于中等屏幕PC端*/
@media screen and (min-width: 992px){
    body {
        background-color:red;
    }
}

避免固定尺寸

使用像px这样的绝对单位，来指定元素的宽高、边框和字体大小等，固定宽度容易破坏响应式布局。为了布局更加灵活，推荐使用百分比、em或rem等相对单位，这样可以保证浏览器字体大小调整和缩放时，能正常显示。常用相对单位，如表2所示。

表2 常用相对单位
单位	说明
em	在font-size中，使用相对于父元素的字体大小，在其他属性中使用相对于自身的字体大小，如width。
rem	相对根元素的字体大小。
ch	相对于数字“0”的宽度。
ex	相对于字符“x”的高度。
lh	相对于元素line-height计算值。

最大和最小值
 对于大屏页面和移动端，内容扩充占满整个屏幕宽度并不总是适用的。展示同样的内容，手机端可能更适宜充满屏幕宽度，而大屏则需要在宽度上留出一定边界，使得布局上更加美观。所以，设定最大值或最小值，可以帮助您设计更为合理的布局。例如，组件宽度设定100%，最大宽度设定1024px，那么内容扩充的最大宽度即为1024px，当屏幕宽度超出1024时，内容在宽度上不会再继续扩展。
嵌套对象
 对于关系紧密的多个元素，采用相对位置会使得元素难以控制。此时，可以考虑放置于同一容器中集中管理。在容器内部，可以考虑采用绝对单位固定其关系，这对于不需要扩展的按钮等元素来说非常有效。
图片的自适应
 自适应组件设计还需要满足图片的自适应，可以使用max-width，对图片宽度进行限制，确保图片宽度不会超过浏览器窗口或容器可视部分的宽度。
移动优先
 通常来说，移动端屏幕较小、视图简单，而大屏空间大、呈现更为复杂和多样。那么，从移动端小屏幕设计入手过渡到大屏幕设计，在开发中逐步增加CSS的复杂度，通过补充设计的方式逐步丰富布局。这样，通过移动优先，可以更轻松地开发响应式布局。