计划介绍

挪动端设计稿： 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就设置具体款式