Mobile adaptation

An Introduction

Mobile design draft: 375*768 [benchmark]
There are usually two solutions, unified idea is design draft standard value * Device width than

375px=100% width means 1px = 100/375%

1px under 375, then 750/375 * 100/375 = 200/375% under 750px;

Solution 1: px to vw

vw: The total page width is 100vw.
The device width during conversion can be configured to be 375, and it will be adapted to different device widths. You can set to continue to use the device's wide sitting reference value when the screen is landscaped.

        '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 //横屏时使用的视口宽度
        }

Option two: rem

Set the reference value to rem, and write it in accordance with rem in the style

      (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
        );
      })();

Mobile terminal practice

General handling

• Font size/line spacing/element width and height/element inner and outer spacing can be directly processed according to the above rules.

Alignment

• Margins are fixed, content is centered
• Fixed height, content centered
• Suction top/bottom suction

picture

• The page generally uses png images (transparency is supported)
• The pictures should be cut to R&D, and the resolution of R&D cuts is generally 2x
• Need to specify how the picture fits in the container? Should it be 100% adapted to the zoom or no longer zoom when either side of the width/height reaches the container

Animation

• The easiest way to deal with animations that do not require high definition or a small area is to give gif
• Apng can be used for animations that require high quality/large area, but apng has display problems on a very small number of mobile phones and will not play in a loop.
• The front end can also write animation, and animation parameters need to be given (such as the motion trajectory of each frame of image/animation, etc.)

Special settings

• Projection: The front end can do simple element projection, but cannot do multi-directional mixed projection
• Rounded corners: The front end can be rounded, but if there is a picture in the element that cannot be seamlessly filled, then the container with rounded corners needs to be made into a background image
• Fonts: Special fonts can be set, and font packages need to be provided. The font package requirements should be as small as possible. This requires the package to include only the fonts used as much as possible. The reference value is 150k
• Font weight: Android only has two: normal(400) bold(700); IOS supports setting values

Pad adaptation

Determine what device is based on the width of the device
For different widths, set different styles in css

How to directly adapt the page on the mobile terminal to the ipad?

• If not processed, the display on the pad will be scaled normally according to the above scheme.
• If you want to adapt the entire screen on the pad without changing the overall layout, R&D can set the scale of the entire page, and the design needs to give the page height of the pad after it is placed on the mobile phone benchmark with the proportional zoom width. This gives the scale value
• The design of the pad is different from the specifications of the mobile phone. At this time, you need to develop a new style on the pad, and give a design draft under a certain device as a benchmark, and let the research and development scale according to the width of the device.

Horizontal screen adaptation

CSS adds style settings in landscape mode

pad + mobile phone horizontal screen adaptation

Adapt by setting the width under different devices. pad: 768 1024 iphoneSE horizontal screen: 568 320, you can set the specific style if you think >=568