这里
preserveAspectRatio 的
meetOrSlice 相对的是容器，不是 适配区 这里用
transform 来定位，而
preserveAspectRatio 的
meetOrSlice 固定为
xMinYMin。
<!doctype html>
<html>
<body>
<style>
svg {
position: absolute;
width: 50.37037037037037%;
height: 7.395833333333333%;
/* x4 = m*v/w*w3 + (x - m*v)/w*w1 */
/* y4 = n*g/h*h3 + (y - n*g)/h*h1 */
top: 0;
left: 0;
transform:
translateX(99.26470588235294%) /* m*v/w*w3 其中 m = .5，v = 1080，w = 544 */
translateY(676.056338028169%); /* n*g/h*h3 其中 n = .5，g = 1920，h = 142 */
overflow: visible;
}
svg image {
transform:
translateX(-48.34558823529412%) /* (x - m*v)/w*w1 其中 x = 277，m = .5，v = 1080，w = 544 */
translateY(378.8732394366197%); /* (y - n*g)/h*h1 其中 y = 1498，n = .5，g = 1920，h = 142 */
}
</style>
<svg viewBox="0 0 544 142" preserveAspectRatio="xMinYMin meet"> <!-- 容器 -->
<image width="544" height="142" xlink:href="http://ui.qzone.com/544x142"/> <!-- 元素 -->
</svg>
</body>
</html>辅助工具
手动计算百分比及写 css 很麻烦，可以借助 sass 等工具来辅助简化。
设计稿宽
v 高
g 一般是页面级常量。只需读取设计稿里每个 元素 的横坐标
x 、纵坐标
y 、宽
w 和 高
h，然后工具生成 css 即可。这下妈妈再也不用担心我还原问题、屏幕适配问题了。
文字处理
文字固定或单行不固定，
svg 的
text 标签可以处理文字固定或单行不固定还可以将文字转为图片
文字多行不固定，可以借助
svg 的
foreignObject 嵌入普通
div方案对比
屏幕适配方案非常多，选哪种方式实现 整层适配 或 精简适配，下面是对比
