移动端适配

specialCoder
English

方案介绍

移动端设计稿: 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
              ) + '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就设置具体样式

阅读 277

前端 设计 摄影 文学 音乐

1.9k 声望
150 粉丝
0 条评论
你知道吗?

前端 设计 摄影 文学 音乐

1.9k 声望
150 粉丝
宣传栏