响应式文档块的语义标记答案

【问题标题】：Semantic markup for responsive docblocks响应式文档块的语义标记
【发布时间】：2012-04-06 02:22:10
【问题描述】：

我正在编写一些 codex，例如文档 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}
}

我也愿意接受任何其他想法。你认为最符合语义的方式是什么？

【问题讨论】：

标签： html css semantics semantic-markup responsive-design

【解决方案1】：

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

<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}

【讨论】：