html - 响应式文档 block 的语义标记

Question

我正在研究一些类似文档的法典 here我想编写标记，使其看起来像 docblock例如:

@param   string    lastName     the last name of the person

@param   string    firstName    the first name of the person

@return  string 

我试图弄清楚要使用的最语义元素是什么(例如 pre 或 dl 或 table 或它们的组合div 和 span)，我还想让它响应，这样在通过 CSS 的小屏幕上它看起来像:

@param   
string    
lastName     
the last name of the person

@param
string
firstName
the first name of the person

@return
string 

我之前为此使用过 2 种解决方案。第一个使用 pre，其中有一些 br 标签，在某个断点上方设置为 display:none。另一种是使用 table 和媒体查询，例如:

@media all and (max-width:640px) {
    table,thead,tbody,tfoot,th,td,tr{display:block}
    tr+tr{margin-top:1em}
}

我也愿意接受任何其他想法。您认为最语义化的方式是什么，同时也能够响应式设置样式？

Answer 1

经过更多试验，IMO 这样的标记是语义 + 响应式 + 跨浏览器兼容性的最佳混合体。它为您提供了很多 CSS 灵 active :

<dl>
  <dt><b>@param</b> <em>string</em> <strong>first</strong></dt>
  <dd>is the first name</dd>
</dl>
<dl>
  <dt><b>@param</b> <em>string</em> <strong>last</strong></dt>
  <dd>is the last name</dd>
</dl>
<dl>
  <dt><b>@return</b> <em>string</em></dt>
  <dd></dd>
</dl>

像这样的 CSS:

dt,dd {display:inline-block;*display:inline;margin:.5em 0}
dd {margin-left:1em}