云服务器内容精选

华为云首页用户手册

如何适配多终端

ASTRO轻应用 ASTROZERO-适配多终端样例:结果验证

结果验证单击，进入预览页面，查看commodityListWidget组件效果。针对手机端视图，AstroZero在预览中提供手机端模拟视图，电脑端和手机端预览效果如图6所示。在电脑端视图中，商品列表单行商品数会跟随浏览器窗口的大小变化。在手机端视图中，商品列表单行商品数为1，始终为单列排布。图6 商品列表组件电脑端和手机端预览效果如果您在高级页面中拖入commodityListWidget组件后，再次上传更新了commodityListWidget组件，需要到应用的“页面设置”中进行版本更新操作新版本才可生效。如何更新组件，请参见管理高级组件版本。使用谷歌浏览器开发者工具（F12），查看多个不同尺寸的终端中此页面的呈现效果。按下“F12”，单击开发者工具中的，可以切换设备（手机、iPad等），查看组件响应式效果。多个终端（响应式模式、iPhone 6/7/8和iPad横屏）视图效果如图7所示，呈现出多终端适配的响应式效果。在分辨率为1797x425的电脑端中，商品列表单行商品数为5。在iPhone 6/7/8中，商品列表单行商品数为1。在iPad（横屏模式）中，商品列表单行商品数为2。图7 多个终端视图效果

ASTRO轻应用 ASTROZERO 如何适配多终端
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的复杂度，通过补充设计的方式逐步丰富布局。这样，通过移动优先，可以更轻松地开发响应式布局。

ASTRO轻应用 ASTROZERO 如何适配多终端
APPCUBE-什么是适配多终端:响应式组件开发基本原则

响应式组件开发基本原则组件的响应式设计，是高级页面适配多终端的重要前提。为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式设计的基本原则。根据内容设计。不专注于特定屏幕宽度，而是专注于内容设计，当屏幕越小或浏览器窗口越窄时，内容所占的垂直高度越来越多，内容就要向下方自然延伸。建议从小屏幕开始，逐步设置断点（例如设备宽度320px、768px、1024px），针对不同设备进行设计，形成流动布局。针对复杂情况，可以使用CSS3的@media查询。针对不同的终端类型和不同屏幕分辨率的设备，定义不同样式，选择应用不同的CSS规则。只有当该设定媒体查询与正在使用的设备匹配时，其对应的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的复杂度，通过补充设计的方式逐步丰富布局。这样，通过移动优先，可以更轻松地开发响应式布局。

APPCUBE 如何适配多终端