This is the 16th day of my participation in Gwen Challenge

1. Use relative units

Usually in project development, we use PX as the unit of size instead of relative units, such as REM, EM, etc. In the era of the Internet of Things, the best approach is relative to the unit REM, VH, VW and other modern CSS layout (such as Flexbox and Grid), maximum support for various terminal devices. Absolute unit

**px ** : is an absolute unit, mainly because it is fixed and does not change based on measurements of any other element. Relative unit

Rem (font size of the root element) : relative to the root () element (default font size is usually 16px) EM (font size of the element) : relative to the parent element % : relative to the parent element **vw: ** Based on the width of the window, 1vw is equal to 1/100th of the window width **vh: ** Based on the height of the window, 1vh is equal to 1/100th of the window height **vmin: ** Based on the minimum value in VW and VH, 1vmin is equal to 1/100th of the minimum value **vmax: ** Based on the maximum values in VW and VH, 1vmax is equal to 1/100th of the maximum value

Upx: Uni-app uses UPX as the default unit of size, which is a unit relative to the base width and can be adapted to the screen width.

Uni-app specifies a screen base width of 750upx. The formula for converting design 1px to frame 1upx is as follows: design 1px/base width of design = frame 1upx / 750upx. If the width of the design is 375px and the width of element B on the design is 200px, then the width of element B in uni-app should be 750 * 200/375, resulting in 400upx.

RPX: The RPX unit is the size unit of the CSS in wechat applet. RPX can be adjusted according to the screen width.

Specify a screen width of 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels, then 750rpx = 375px = 750 physical pixels and 1rpx = 0.5px

/* Not good */
.wrap {
    font-size: 14px;
    margin: 10px;
    line-height: 24px;
}
/ * good * /
.wrap {
    font-size: 1.2rem;
    margin: 0.5rem;
    line-height: 1.6em;
}
Copy the code

2. Code reuse

Many developers talk about CSS in terms of code repetition, which is not a good practice in project development.

Fortunately, CSS preprocessors (SASS/SCSS, LESS, Stylus, Turbine) allow us to better plan CSS code and improve its reuse.

Of course, the need to improve the code reuse, or need a certain CSS foundation, to design a good code structure, as follows

/* Not good */
.container {
    background-color: #efefef;
    border-radius: 0.5rem;
}

.sidebar {
    background-color: #efefef;
    border-radius: 0.5rem;
}

/ * good * /
.container,
.sidebar {
    background-color: #efefef;
    border-radius: 0.5rem;
}
Copy the code

4. Don’t use color names

Do not use color names such as red or blue. Instead, use a hexadecimal value of the color.

Why is that? This is because when using a color name like red, it will appear differently in different browsers or devices.

/* Not good */
.container {
    background-color: red;
}

/ * good * /
.container {
    background-color: #ff0000;
}
Copy the code

5, vertical center

Vertical centering is a very common requirement and can be implemented in a number of ways to center anything in a scalable container vertically:

.flex-vertically-center {
    display: flex;
    align-items: center;
}

Copy the code

6, horizontal center

.flex-vertically-center {
    display: flex;
    justify-content: center;
}
Copy the code

7. Tips

  • Instead of changing the height and width properties, use transform: scale().
  • To move elements, avoid changing the top, right, bottom, or left attributes and use transform: Translate () instead.
  • If you want to blur the background, consider using a blurry image and changing its opacity.