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和{{1}的组合并且我也想让它响应，所以在CSS的小屏幕中它看起来像：

span

我之前使用了2个解决方案。第一个使用@param string lastName the last name of the person @param string firstName the first name of the person @return string，其中包含一些pre个标记，在某个断点之上设置为br。另一个是使用display:none和媒体查询，如：

table

我也对任何其他想法持开放态度。您认为最具语义性的方式也可以响应式设计？

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

响应式docblock的语义标记

1 个答案: