移动适配和切图方案By三水清.pdf

移 动 适 配和 切 图方案 三个 问题 高清屏 宽高计 算 字体 计 算 先 看 个 页 面 问题 先说 下设 备像 素 比 d pr ：设 备像 素 比 w i n d ow .d e v i ce Pix e l Ra t i o m e t a t y p e v i ew p o r t co n t e n t d p r ：设 备 像 素 比 所 以 。 。 64 0 px 的 宽 度 在 d p r 2 的 宽 度 在 的屏 上 长 度 是 3 2 0 px R EM 是什 么 e m v s r e m 这 是2 0 px 字体 这 是 1e m 的 字体 这是 1.5e m的字体 - 这是 1.2em的字体 这 是2 0 px 字体 这 是 1r e m 的 字体 这 是 1.5 r e m 的字体 - 这 是 1.2 r e m 的 字体 R EM d o c u m e n t .d o c u m e n t E l e m e n t HT M L 的 f o n t - s iz e 扫 完盲 ，直接 说 结论 结 论 布 局使 用 ：re m 字体使 用 百分 比 设 置 h t m l 的f o n t - s iz e 用 于 r e m 基 准 值 var docEl = docum nt.docum ntEl m nt; var width = docEl.g tBoundingCli ntR ct().width; var r m = width / 10; docEl.styl .fontSiz = r m + px; 页面head顶 部 引入 fl xibl .js 设 置 b o d y 的f o n t - s iz e 用 于 页 面 字 体 基 准 值 [data-dpr=1] body{ font-siz : $font-bas lin ; } [data-dpr=2] body{ font-siz : $font-bas lin * 2; } [data-dpr=2.5] body{ font-siz : $font-bas lin * 2.5; } [data-dpr=2.75] body{ font-siz : $font-bas lin * 2.75; } [data-dpr=3] body{ font-siz : $font-bas lin * 3; } 页面宽 高和 字体 怎 么计 算？ 根 据设计稿 宽度设 置 bas e li ne 根 据标 注 原 比例 切 图 bs a s s 的 两 个 m ix i n @import bsass/bas ; $r m-bas lin : 64px; $font-bas lin : 12px; .d mo{ @includ r m(padding, 20px 30px); @includ r m(h ight, 200px); //文字需要提前除以dpr @includ fontsiz (24px); } $ r e m- bas e li ne 怎 么定？ 根 据 视 觉 稿 宽 度 / 10 $f o n