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

CSS3 calc, constant, env functions, IOS adaptation and small program font bold

1. Calc () function in css3

This function is used to dynamically calculate the length value in someone else’s CSS.

1.1 Notes on calc() usage

  • Leave a space before and after the operator, for example: width: calc(100%-10px);
  • Any length value can be computed using the calc() function;
  • The calc() function supports “+”, “-“, “*”, “/”;
  • The calc() function uses standard mathematical precedence rules;
  • In less precompiled languages you should use width:calc(~” 100%-10px “);

1.2 calc ()

The following code:

.box{
  width: calc(100% - 10px);
}
Copy the code

In general what this code means is that the.box element is always 10px smaller than the parent element;

1.3 Performance problems of CALC ()

I looked it up a little bit and avoided using the calc () expression in the front end, because it’s redrawn a lot and it really hurts performance.

Canstant and env functions

The env() CSS function inserts user-agent environment variable values into your CSS in a manner similar to the var function and custom Properties. The difference is that, in addition to being defined by the user agent rather than by the user, environment variables are globally applied to the document, whereas custom attributes are restricted to the element in which they are declared.

To tell the browser to use all available space on the screen and use the env() variable accordingly, we need to add a new viewport element value:

<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
Copy the code

2.1 Basic Usage

Env (< built-in value >, < rollback value >)

env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
Copy the code

The rollback value is not required. If the built-in value does not take effect, the rollback value prevails. The canstant () function is similar

3. Ios adaptation

3.1 Safe Distance in ios

In summary, the constant and env functions are basically used by ios to solve its own safety distance problem:

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
Copy the code

If you’re in an applet, you don’t need to add a new viewport value if you’re in H5, where viewport-fit=cover, viewport has three options:

  • Auto: This value does not affect the initial layout view port, and the entire Web page is viewable.
  • Contain: View port is scaled to fit the largest embedded rectangle.
  • Cover: The view port is scaled to fill the device display. It is highly recommended to use the Safe Area inset variable to ensure that important content does not appear outside the display.

3.2 Remove the gradient effect from the Input button in ios

Solution:

input{
	outline:0px; 
	-webkit-appearance:none;
}
Copy the code

4. Bold fonts in wechat mini programs

Font weight:block; And so does not take effect, although the development tool is effective, but the mobile phone display is still not bold;

Solution:

// Android solutionfont-weight: 400;
-webkit-text-stroke: 0.02 em; //ios solutionfont-family: PingFang-Midum;
Copy the code