html5 分层屏幕适配的方法
<!doctype html> <html> <body> <style> div { position: absolute; width: 50.37037037037037%; /* w3 = w/v*u 其中 w = 544,v = 1080 */ height: 7.395833333333333%; /* h3 = h/g*f 其中 h = 142,g = 1920 */ background: url() no-repeat; /* 背景图做元素 */ background-size: cover; left: 25.64814814814815%; /* x3 = x/v*u 其中 x = 277, v = 1080 */ top: 78.02083333333333%; /* y3 = y/g*f 其中 y = 1498, g = 1920 */ background-position-x: -48.34558823529412%; /* o = (x - m*v)/w 其中 m = .5 , v = 1080,x = 277,w = 544*/ background-position-y: 378.8732394366197%; /* p = (y - n*g)/h 其中 n = .5 , g = 1920,y = 1498,h = 142*/ } </style> <div></div> <!-- 容器 --> </body> </html> <svg> 实现示例 preserveAspectRatio 的 meetOrSlice 为 meet 时对应 contain 适配。 preserveAspectRatio 的 meetOrSlice 为 slice 时对应 cover 适配。 preserveAspectRatio 值为 none 时对应 fill 适配。 这里 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://www.jb51.net/html5/"http:/ui.qzone.com/544x142"/> <!-- 元素 --> </svg> </body> </html> 辅助工具 手动计算百分比及写 css 很麻烦,可以借助 sass 等工具来辅助简化。 文字处理 文字固定或单行不固定,svg 的 text 标签可以处理 文字固定或单行不固定还可以将文字转为图片 文字多行不固定,可以借助 svg 的 foreignObject 嵌入普通 div 方案对比 屏幕适配方案非常多,选哪种方式实现 整层适配 或 精简适配,下面是对比
方案
缩放
定位
文字缩放
兼容
(编辑:厦门网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |