preface

For mobile web pages, don’t forget to add in the element

  <meta name="viewport"
        content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Copy the code

REM

Rem: Font-size of the root element.

1rem === html.fontSize -> true
Copy the code

Rem relates the screen width

Get the screen width from js and assign the screen width to the HTML style fontSize property:

// Get the screen width
var w = document.documentElement.clientWidth;
// Set the root element to font-size
document.documentElement.style.fontSize = w / 10 + 'px';
Copy the code

Note: the number "10" is set arbitrarily (divide the screen 10 equally) for easy calculation. This divisor should not be too large because most browsers have a minimum font size of 12px.

It can now be concluded that:

1rem === HTML. FontSize == 1/10th of the screen widthCopy the code

Therefore:

10REM === 100% screen width 1REM === 10% screen widthCopy the code

application

If the design is 320px wide (iPhone 5) and has a <div> element 160px wide and 80px high, the adaptation process is as follows.

  • Set the fontSize of the root element dynamically based on the screen width
window.onresize = setRootFontSize;
function setRootFontSize(){
    // Get the screen width
    var w = document.documentElement.clientWidth;
    // Set the root element to font-size
    document.documentElement.style.fontSize = w / 10 + 'px';
}
setRootFontSize();
Copy the code
  • CSS adaptation
div {
    width: 5rem;
    height: 2.5 rem;
}
Copy the code

160px === 50% screen width === = 5rem 80px === = 25% screen width === 2.5rem

  • test

Switch to a 375px screen width (iPhone 6)

187.5px === 50% screen width === 5REM

93.75px === 25% Screen width === 2.5rem

To optimize the

The above method requires a lot of computation in the.css file, which is very inconvenient. Therefore, the.scss file is introduced, and the @function function is used to calculate the rem value.

// The width of the design screen
$design-width: 320px;

@function px2rem($px) {
    // Calculate the number of rem
    @return $px / ($design-width / 10) + rem;
}
// Adapt the global font, the design draft default 12px
body {
    font-size: px2rem(12);
}

div {
    // 160 is the width of the design element
    width: px2rem(160);
    // 80 is the height of the design element
    height: px2rem(80);
}
Copy the code

postcss-px-to-viewport

In the Node project, use postcss-px-to-viewPort to automatically convert PX to VW.

The installation

yarn add postcss-loader autoprefixer postcss-px-to-viewport --dev
Copy the code

Postcss – loader configuration

Modify postcss. Config. Js

module.exports = {
    plugins: [
        require('autoprefixer'),
        require('postcss-px-to-viewport') ({unitToConvert: "px".// The unit to convert
            viewportWidth: 320.// Width of UI design draft
            unitPrecision: 6.// The precision of the conversion, i.e. the number of decimal places
            propList: ["*"].// Specify the unit of the CSS property to be converted. * indicates that all CSS properties are converted
            viewportUnit: "vw".// Specify the window unit to convert to, default vw
            fontViewportUnit: "vw".// Specify the window unit to convert the font to, default vw
            selectorBlackList: ["nav-bar"."tab-bar"."main-page-content"."swiper"].// Specify the class name that is not converted to window units,
            minPixelValue: 1.// The default value is 1, and the conversion is not performed if the value is less than or equal to 1px
            mediaQuery: true.// Whether the media query is also converted in the CSS code, the default is false
            replace: true.// Whether to replace the attribute value directly after conversion
            exclude: [/node_modules/].// Sets the file to be ignored and the re to match the directory name
            landscape: false // Whether to handle landscape}})];Copy the code

PropList: When we do not want to convert units of properties, we can add them to the end of the array and add them to the front! For example, propList: [“*”,”! Letter-spacing “], which means that all CSS properties are converted to property units, except for the.letter-spacing selector.

SelectorBlackList: converted blacklist. In the blacklist, we can write strings. As long as the class name contains this string, it will not be matched. For example, selectorBlackList: [‘wrap’], which indicates that units with class names like wrap,my-wrap,wrapper, etc., will not be converted.

application



To:





To: