第12页
· i Phone7/8；
· i Phone7/8 Plus；
· i Phone6s；
· 华为旗舰类；
· 安卓及其他。
尽管手机用户往往非常拥护自己用的手机品牌。不过对于企业广告投放而言，残酷的现实依然是品牌主默认iPhone和华为旗舰机用户的消费能力最强。个别调性高的公司甚至完全忽略安卓适配。
当然，开发者也要注意客户的特殊性。比如以前JZ多媒体解决方案为华为交付过一篇交互图文，在整个开发过程中，完全是以华为旗舰机和平价机的表现为优先适配的。
em单位
em好比数学中一个无单位的1。在浏览器默认情况下，16 px为em。尤其当页面内位图素材、矢量模块纵横交织的情况下，em的表现就比px好多了。因而em不是一个固定数值，可以根据对父元素的声明而发生变化，这显然使排版更自由。
很多时候，我们无法避免位图素材的px对排版和布局的影响。如果以往你通过px对位图素材进行定位，那么现在可以尝试用em。以浏览器单位长度为概念，很多时候可以确保多机型的布局效果接近。
rem单位
rem是CSS3的新增单位，相比em最大的优势在于不以“父元素”为基准，这样可以限制嵌套多个“父元素”产生的尺寸连锁反应问题，只以HTML根元素为参照。于是，可以说rem兼容了相对尺寸和绝对尺寸的共同优势，在布局时更方便。
通过代码反洗稿
优质内容、版式往往面临被洗稿 [2] 的风险，无论是发文声讨还是对簿公堂，都需要强有力的证据支撑。代码不会说谎。对于洗稿行为，其实有一些基于HTML5书写规则的方式可以保留你的版权信息。接下来介绍两种方式。
对于日常的运营，我们可以注入一些基本的CSS标记。由于微信图文的HTML5结构简单，我们其实直接把HTML和CSS写在一起。以下4种常用标签就可以作为注入版权信息的标的。
· label
· id
· class
· data*-
注入它们的位置是相对任意的，当然前提是要写在有效的地方。显然，由于HTML5规范要求所有元素应当闭合，所以版权信息应当书写在任意元素头部的属性值中。比如以下注入方式都是可以的（如图2-21所示）。
图2-21 在代码中注入版权信息
为什么这些内容不会干扰你的排版呢？
label标签本质上不会产生任何展示效果，它仅在鼠标行为中有时用于浏览器定位，所以我们可以在这个标签中注入；id很好理解，它的存在其实是为了JavaScript对其产生作用，但由于微信图文早在2015年年中就基本阻断了JavaScript的使用，所以自然就可以作为一个注入标的；class是类的申明，由于微信图文的HTML和CSS都写在了一起，它自然失去了功能，因此可以作为注入标的但不会对图文造成任何影响；data*-属性用于嵌入自定义内容。
更高阶的反洗稿可以通过有意书写错误元素实现。因为书写错误，且不生效的前端元素，其实对于HTML5来说并不会产生什么严重问题。比如在撰写一篇图文时，只要注意标签的闭合原则，其实你可以在图文中加入任何自定义元素，比如这组元素。这种元素在图文发布时，会被完全保留下来。接下来，即便洗稿者“清空样式”，这类没有具体属性的元素依然会被保留。洗稿一旦发布，这就成了一个非常重要的溯源证据。
Markdown一键排版
现在，你已经基本了解CSS的定义和书写方式，它将极其有助于你自定义样式，或者从第三方编辑器中选择合适样式后进行修改。但是，有没有可以进一步提升效率的排版方法？答案就是Markdown。
Markdown排版的含义
并不是说因为快，运营者就应当采用这种排版方式，它其实是有一些具体实用场景的。在理解这些场景前，我们应当进一步理解Markdown。
这是一种语法结构极其简单的样式渲染语言，有多简单呢？不少职场人在使用锤子便签或书写邮件时就会用到它。它有一些常用的语法规则。这里我们引用锤子便签在页面中的说明。
标题
使用“#”加空格在行首创建标题。
例如：
#一级标题；
##二级标题；
###三级标题；
###加粗功能。
使用一组星号“**”或一组下划线“__”加粗一段文字。
例如：
这是**加粗的文字**；
这也是__加粗的文字__。
居中
使用一对中括号“［文字］”将一段文字居中，也可以和标题叠加使用。
例如：
［###这是一个居中的标题］；
###引用。
使用“>”在段首引用一段文字。
例如：
>这是一段引用；
>这是一段引用。
无序列表
使用“-”“*”或“+”加空格创建无序列表。
例如：
-这是一个无序列表；
+这是一个无序列表；
*这是一个无序列表。
有序列表
使用数字圆点加空格如“1.”“2.”创建有序列表。
例如：
1.这是一个有序列表；
2.这是一个有序列表；
3.这是一个有序列表。
当然，Markdown还可以用来生成横道图、流程图等高级页面效果，但是这里不做赘述。仅从锤子便签的介绍看，这确实是一种很好写的语法，即只要先以纯文本方式写内容，在标题、引用、列表等文字前加对应符号，然后让Markdown渲染一下，排版瞬间就完成了。
所以Markdown明显的特征是：
· 快；
· 同类型内容样式唯一；
· 默认样式相对简洁朴素。
Markdown排版的应用
值得一提的是，它是唯一一种在富文本中可以快速生成代码框并自动完成高亮的语法。通过以下书写方式，只要预先设定好高亮规则，一段代码就可以优雅地躺在新媒体富文本内。如果直接把代码文本复制进来，那么，代码长度往往会占据巨大的篇幅，而且高亮需要手动修改极其耗时。所以Markdown排版对程序员、IT公司等发布新媒体内容是极其友好的。
…css
（此处为代码）
…
我们以Chrome插件里的Markdown为例，任何网页内普通富文本编辑区都支持渲染。比如你编辑完文章并加好Markdown各类样式的对应符号后，按下快捷键Ctrl+Shift+M（默认），这篇文章的排版就完成了。当然，这样的视觉效果非常简洁朴素，没有太多丰富的视觉效果，但对程序员来说新媒体内容本来就应该是简洁朴素的，所以恰好适用。
如果我们想设置更丰富的样式，那就需要修改Markdown的渲染规则（如图2-22所示）。想要足够浮夸？这是完全可以的。虽然Markdown以简洁著称，但是它毕竟是基于CSS渲染，所以在渲染规则设置中可以无限扩充样式。打开Chrome插件里的Markdown配置中心后，会发现目前使用的是默认渲染CSS，如h1（一级主标题）仅仅设置了字号和底部border样式，那么当你按下快捷键后，效果自然是朴素的。
图2-22 默认渲染CSS
h1 {
font-size：1.6em；
border-bottom：1px solid #ddd；
}
这就好比Markdown仅锁定了content中的文本内容，至于其content、padding、border、margin等一概没有限制。这时，你可以应用之前在本书学习到的CSS设计，或者从一些第三方编辑器里直接寻找优质的样式，将CSS部分整理并复制过来，那么你的一级标题经过Markdown渲染就会焕然一新。