Recently, WHEN I was writing some mobile pages, I always encountered some adaptation problems. I don’t know why I used to use REM as the unit, but there were always problems and it was quite uncomfortable to write, so I couldn’t sit still and had to go to see if there was a better way. Then came the lesson. Just to be fair, REM didn’t know who it was, but it messed up a lot of people. If you’re doing the front end, you probably know the relative units of VW and VH. Postcss-px-to-viewport = postcss-px-to-viewport = postcss-px-to-viewport = postcss-px-to-viewport = postcss-px-to-viewport = postcss-px-to-viewport = postcss-px-to-viewport

module.exports = {
  "plugins": {
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,
      // viewportHeight: 1334,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: [
        '.ignore'.'.weui-dialog'.'.swiper'.'.weui-toast'.'.weui-loading'.'.weui-icon_toast'], // This is the CSS name that needs to be ignored. Use minPixelValue: 1, mediaQuery:false}}}Copy the code

ViewportWidth: 750 This configuration refers to the UI to your mobile page is 750px wide, so that your CSS (less) file write units or the original PX on the line, such as blue lake on the width of an image is 75px*75px, then you can also write directly in the CSS OK.

.img{ width: 75px; height: 75px; } // this will compile to.img{width: 10vw; height: 10vw; }Copy the code

Writing and communication with UI completely without manual conversion, is there a kind of suddenly realized feeling, write small program can understand, small program RPX unit is actually the same principle. Finally, I think flex + VW is the perfect solution for mobile adaptation.