共计 2032 个字符，预计需要花费 6 分钟才能阅读完成。
计划介绍
挪动端设计稿：375*768【基准】
通常有两种计划，对立的思维就是 设计稿基准值 * 设施宽度比
375px=100% 宽度 也就是说 1px = 100/375 %
在 375 下 1px, 则在 750px 下 750/375 * 100/375 = 200/375 %;
计划一：px 转 vw
vw: 页面总宽度为 100vw。
能够配置转换时的设施宽度是 375，会在不同设施宽度上进行适配。能够设置在横屏时持续应用设施宽坐基准值。
'postcss-px-to-viewport': {
unitToConvert: 'px', // 须要转换的单位，默认为 "px"
viewportWidth: 375, // 视窗的宽度，对应的是咱们设计稿的宽度
viewportHeight: 667,// 视窗的高度，依据 375 设施的宽度来指定，个别指定 667，也能够不配置
unitPrecision: 13, // 指定 `px` 转换为视窗单位值的小数位数（很多时候无奈整除）propList: ['*'], // 能转化为 vw 的属性列表
viewportUnit: 'vw', // 指定须要转换成的视窗单位，倡议应用 vw
fontViewportUnit: 'vw', // 字体应用的视口单位
selectorBlackList: ['.ignore-', '.hairlines'], // 指定不转换为视窗单位的类，能够自定义，能够有限增加, 倡议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于 `1px` 不转换为视窗单位，你也能够设置为你想要的值
mediaQuery: false, // 容许在媒体查问中转换 `px`
replace: true, // 是否间接更换属性值，而不增加备用属性
exclude: [], // 疏忽某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
landscape: true, // 是否增加依据 landscapeWidth 生成的媒体查问条件 @media (orientation: landscape)
landscapeUnit: 'vh', // 横屏时应用的单位
landscapeWidth: 375 // 横屏时应用的视口宽度
}计划二：rem
把基准值设置为 rem, 在款式里都是依照 rem 来写
(function() {
var designWidth = 375;
var rem2px = 100;
var tid;
function setRfs() {
document.documentElement.style.fontSize =
Math.max((window.innerWidth / designWidth) * rem2px,
(document.documentElement.clientWidth / designWidth) * rem2px,
85.3333
) + 'px';
}
setRfs();
window.addEventListener(
'resize',
function() {clearTimeout(tid);
tid = setTimeout(setRfs, 300);
},
false
);
})();手机端实际
通用解决
- 字体大小 / 行间距 / 元素宽高 / 元素内外间距 这些能够依据下面的规定开发间接解决
对齐形式
- 边距固定，内容居中
- 高度固定，内容居中
- 吸顶 / 吸底
图片
- 页面个别应用 png 图片（反对通明）
- 图片要给到研发能做切图，研发切图分辨率个别为 2x
- 要指明图片在容器中如何适应？是 100% 适应缩放还是宽 / 高 任意一边达到容器了就不再缩放
动画
- 不要求高清晰度或者区域很小的动画的最简略解决是给 gif
- 要求品质高 / 区域大的动画能够用 apng, 然而 apng 在极少数手机上显示有问题，不会循环播放
- 前端也能够写动画，须要给到动画参数（比方每一帧图像 / 动画的静止轨迹等）
非凡设置
- 投影：前端能够做简略的元素投影，无奈做多方向混合投影
- 圆角：前端能够做圆角, 然而如果元素里有图片无奈做到无缝填充，这时候须要把带有圆角的容器做成背景图
- 字体：能够设置非凡字体，须要给到字体包，字体包要求尽量小，这就须要包里尽量做到只蕴含用到的字体，参考值 150k
- 字重：安卓只有两个：normal(400) bold(700); IOS 反对设置数值
Pad 适配
依据设施宽度判断是什么设施
针对不同的宽度，css 里设置不同的款式
手机端的页面如何间接适配到 ipad 上？
- 如果不解决，在 pad 上的显示会依照下面的计划失常缩放。
- 如果想在 pad 上在不扭转整体布局的状况下做整屏适配，研发能够设置整个页面的 scale, 设计须要给到 pad 稿在放在手机基准上等比缩放宽度撑满之后的页面高度，这样就得出了 scale 值
- pad 端的设计与手机端的标准不一样，这时候须要研发在 pad 上从新写款式，给到研发一个在某个设施下的设计稿就作为基准，让研发依据设施宽度进行缩放。
横屏适配
css 增加横屏状态下的款式设置
pad + 手机横屏 适配
通过设置不同设施下的宽度来适配。pad: 7681024 iphoneSE 横屏：568 320 能够认为 >=568 就设置具体款式
正文完