MIP文章问题
MIP 组件支持的各种布局，可以让图片屏幕自适应、定高等。用于预先给组件确定占位，防止组件内容加载后撑开页面，造成页面内容抖动，浏览器重排重绘，简称为 layout 。
支持的布局种类
| 类别 | 强制 width | 强制 height | 详细说明 |
|---|---|---|---|
| responsive | 是 | 是 | 能够根据 width、height 的值，算出元素对应的比例，在不同屏幕宽度上做自适应，非常适合图片、视频等需要大小自适应的组件 |
| fixed-height | 否 | 是 | 元素的高度固定，width 缺省或者取值为 auto ，比较适合 mip-carousel |
| fixed | 是 | 是 | 元素根据 width 和 height 固定高宽，不随屏幕宽度变化 |
| flex-item | 否 | 否 | 元素通过 flex 进行布局，需设置父元素为 display: flex |
| fill | 否 | 否 | 元素的大小根据父节点的大小自动撑开 |
| container | 否 | 否 | 元素的高度由子节点高度决定，相当于 display: block |
| nodisplay | 否 | 否 | 元素不展现，即 display: none ，这种元素可由用户点击触发显示，也可以应用于统计组件 |
使用方法
MIP 元素添加属性 layout，取值参照上面的种类，如：
img
layout="responsive"
width="350"
height="263"
src="/doc/image/layout/img.jpg">
layout 详解
1. responsive
- 布局介绍：使用
layout="responsive"的组件能够根据width、height的值，算出元素对应的比例，在不同屏幕宽度上做自适应。 - 适用场景：图片、视频、图片轮播等需要按比例自动缩放的元素。
代码示例：
- 使用效果：
2. fixed-height
- 布局介绍：使用
layout="fixed-height"的组件高度固定，不随屏幕大小变化。width缺省或者取值为auto。 - 适用场景：高度固定的广告位、音频播放组件、mip-fixed悬浮组件。
代码示例：
- 使用效果：
3. fixed
- 布局介绍：使用
layout="fixed"的组件宽高固定，根据width和height取值（px）固定宽高，元素尺寸不随屏幕大小变化。 - 适用场景：头像图片、表情GIF、后退按钮 等有固定大小的元素。
代码示例：
- 使用效果：
4. flex-item
- 布局介绍：使用
layout="flex-item"的组件通过flex进行布局，需设置父元素为display: flex，元素的大小根据父节点的大小自动撑开。 - 适用场景：多图横向排列，左右内容对比布局。
代码示例：
<style> #container { display: flex; height: 200px; } style> <section id="container"> <mip-img layout="flex-item" src="/doc/image/layout/img.jpg">mip-img> <mip-img layout="flex-item" src="/doc/image/layout/img.jpg">mip-img> <mip-img layout="flex-item" src="/doc/image/layout/img.jpg">mip-img> section>- 使用效果：
5. fill
- 布局介绍：使用
layout="fill"的元素的大小根据父节点的大小自动撑开。 - 适用场景：铺满父元素的背景图片。
代码示例：
<style> .container { position: relative; height: 300px; width: 80%; } style> <section class="container"> <mip-img layout="fill" src="img.jpg"> mip-img> section>- 使用效果：
6. container
- 布局介绍：使用
layout="container"的元素的大小根据子节点的大小自动撑开，相当于display: block。 - 适用场景：内容高度不固定的表单，无限滚动组件。
代码示例：
<mip-history history="go, -1" layout="container"> 我说你是人间的四月天；笑声点亮了四面风；轻灵在春的光艳中交舞着变。你是四月早天里的云烟，黄昏吹着风的软，星子在无意中闪，细雨点洒在花前。那轻，那娉婷，你是，鲜妍百花的冠冕你戴着，你是天真，庄严，你是夜夜的月圆。 mip-history> <script src="https://c.mipcdn.com/static/v1/mip-history/mip-history.js">script>- 使用效果：
7. nodisplay
- 布局介绍：使用
layout="nodisplay"的元素不展现，即display: none。隐藏元素可由用户点击触发显示，也可以应用于统计组件。 - 适用场景：不需要显示在页面上的mip-pix统计、mip-analytics统计、百度统计组件，由用户点击触发的mip-lightbox弹框组件。
代码示例：
"nodisplay" class="mip-hidden" id="L1"> <div class="lightbox"> on="tap:L1.toggle" class="lightbox-btn">关闭弹层 div> - 使用效果：
layout 属性缺省规则
| width | height | 其他属性 | 默认布局 |
|---|---|---|---|
| 有 | 有 | 无 | fixed |
| 有 | 有 | 存在 sizes 参数 |
responsive |
无或取值为 auto |
有 | 无 | fixed-height |
| 无 | 无 | 无 | container |
layout 默认值
所有 MIP 元素都会有 layout 。移动端的设计大部分是块状的，默认的 layout 是 container 。如果有其它的样式需求，如 inline、inline-block。可通过 CSS 样式覆盖的方式修改元素 display 属性。