Summary of wechat H5 compatibility problems
1.CSS3 is incompatible with earlier versions of mobile phones such as Android 4.3,IOS8 and below
Problem description: When the above mobile phone processes the animation, the animation is not loaded. If the interface setting appears after the animation is loaded, it will set overflow:hidden style to the page to make the page load a blank interface.
Solution: The above mobile version of CSS3 animation frame processing should be extra careful:
@-webkit-keyframes Each animation frame needs to be prefixed with -webkit-.
IOS8 processing animation when the load can not start animation, need to delay animation, so that the browser has enough time to load animation.
Here’s a solution to a similar problem with Stack Overflow.
2. Flex is incompatible with older phones (android 4.3,IOS8 and below)
Problem description: The Flex layout in the previous version of the phone does not work, the overall layout still belongs to the default.
Solution: reference segmentfault.com/a/119000000…
The flex container is assumed to be.box and the child element is.item.
Compatible writing (the way to handle this problem) begins by defining the display property of the container:
.box{ display: -webkit-box; /* Older syntax: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* Old version syntax: Firefox (buggy) */ display: -ms-flexbox; /* Mixed version syntax: IE 10 */ display: -webkit-flex; /* New version syntax: Chrome 21+ */ display: flex; /* New version syntax: Opera 12.1, Firefox 22+ */ }
Copy the code
Since the old syntax is not included in the W3C standard, display:box is not used here, and the following syntax is the same.
Note also that if the child element is inline, in many cases display:block or display:inline-block is used to turn the inline child element into a block element (such as using the box-flex attribute), which is one of the differences between the old and new syntax.
Spindle alignment of child elements
.box{ -webkit-box-pack: center; -moz-justify-content: center; -webkit-justify-content: center; justify-content: center; }
Copy the code
The old syntax has 4 arguments, while the new syntax has 5 arguments. The space-around syntax compatible with the new syntax is not available:
.box{
box-pack: start | end | center | justify;
/ * main shaft alignment: left aligned (default) | | center aligned right about | aligned * /
justify-content: flex-start | flex-end | center | space-between | space-around;
/ * main shaft alignment: left aligned (default) | | center aligned right aligned on both ends of the | | * / average distribution
}
Copy the code
Cross axis alignment of child elements
.box{ -webkit-box-align: center; -moz-align-items: center; -webkit-align-items: center; align-items: center; }
Copy the code
The parameters here have the same function in addition to different writing methods:
.box{ box-align: start | end | center | baseline | stretch; / * cross shaft alignment: top alignment (default) | | center aligned at the bottom of the baseline alignment | | text alignment, up and down and covered with * / align-items: flex-start | flex-end | center | baseline | stretch; / * cross shaft alignment: at the bottom of the top alignment (default) | | center aligned | up and down and covered with | text baseline aligned * / }
Copy the code
A child element can be displayed in box-direction + box-orient + flex-direction.
Left to right
.box{ -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; }
Copy the code
Right to left
.box{ -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -moz-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }
Copy the code
The box-direction method only changes the order of the child elements, but does not change the alignment. You need to add a box-pack to change the alignment.
Top to bottom
.box{ -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }
Copy the code
Bottom to top
.box{ -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: vertical; -moz-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; }
Copy the code
Whether child elements are allowed to scale
.item{ -webkit-box-flex: 1.0; -moz-flex-grow: 1; -webkit-flex-grow: 1; flex-grow: 1; }
.item{ -webkit-box-flex: 1.0; -moz-flex-shrink: 1; -webkit-flex-shrink: 1; flex-shrink: 1; }
Copy the code
If box-flex is not 0, the child element is allowed to scale. If flex is not 0, the child element is allowed to scale. If flex is 0, the child element is allowed to scale. Box-flex defaults to 0, which means that by default, it behaves differently in both browsers:
In the old syntax, if the value of box-flex is not equal to 0, the larger the value of box-flex is, the larger the proportion of blank space is, and vice versa:
In the new version of the syntax, the scaling is assigned directly to the value of flex-grow. The flex-grow scaling overwrites flex-shrink:0.
Parameters:
.item{ box-flex: <value>; /* Scaling: < a floating point number. The default value is 0.0, which means that it is not scalable. Values greater than 0 are scalable, and flexible relative >*/ flex-grow: <number>; /* default 0 */ /* Zoom in: defaults to 0 (if there is no space left, zoom in if the value is 1, 2 is double the size of 1, and so on) */ flex-shrink: <number>; /* default 1 */ /* Shrink: defaults to 1 (shrinks if space is insufficient, and does not shrink if the value is 0) */ }
Copy the code
Display order of child elements
.item{ -webkit-box-ordinal-group: 1; -moz-order: 1; -webkit-order: 1; order: 1; }
Copy the code
The old syntax section defines the display property of the container
.box{ display: -moz-box; /*Firefox*/ display: -webkit-box; /*Safari,Opera,Chrome*/ display: box; }
Copy the code
Container attribute
1. The box – pack attributes
Box-pack defines the spindle alignment of child elements.
.box{ -moz-box-pack: center; /*Firefox*/ -webkit-box-pack: center; /*Safari,Opera,Chrome*/ box-pack: center; }
Copy the code
The box-pack property has a total of four values:
.box{ box-pack: start | end | center | justify; / * main shaft alignment: left aligned (default) | | center aligned right about | aligned * / }
Copy the code
2. The box – the align attribute
Box-align defines the cross axis alignment of child elements.
.box{ -moz-box-align: center; /*Firefox*/ -webkit-box-align: center; /*Safari,Opera,Chrome*/ box-align: center; }
Copy the code
The box-align property has a total of five values:
.box{ box-align: start | end | center | baseline | stretch; / * cross shaft alignment: top alignment (default) | | center aligned at the bottom of the baseline alignment | | text alignment, up and down and covered with * / }
Copy the code
3. The box – direction attribute
Box-direction Defines the display direction of child elements.
.box{ -moz-box-direction: reverse; /*Firefox*/ -webkit-box-direction: reverse; /*Safari,Opera,Chrome*/ box-direction: reverse; }
Copy the code
The box-direction attribute has three values:
.box{ box-direction: normal | reverse | inherit; / * display direction: the default direction | | inherit the child elements in the opposite direction of the box - direction * / }
Copy the code
4. Box – received properties
Box-orient defines whether child elements should be arranged horizontally or vertically.
.box{ -moz-box-orient: horizontal; /*Firefox*/ -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/ box-orient: horizontal; }
Copy the code
The box-orient attribute has a total of five values:
.box{ box-orient: horizontal | vertical | inline-axis | block-axis | inherit; / * orientation: horizontal vertical | | inline arrangement (the default) | block arranged | inherit the parent box - received * / }
Copy the code
5. The box – lines of attributes
Box-lines defines whether to allow child element newlines when the child element exceeds the container.
.box{ -moz-box-lines: multiple; /*Firefox*/ -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/ box-lines: multiple; }
Copy the code
The box-lines property has a total of two values:
.box{ box-lines: single | multiple; / * allows a newline: do not allow (the default) | allow * / }
Copy the code
Child element attribute
1. The box – flex properties
Box-flex defines whether the current child element is allowed to scale.
.item{ -moz-box-flex: 1.0; /*Firefox*/ -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/ box-flex: 1.0; }
Copy the code
The box-Flex attribute uses a floating-point value:
.item{ box-flex: <value>; /* Scaling: < a floating point number. The default value is 0.0, which means that it is not scalable. Values greater than 0 are scalable, and flexible relative >*/ }
Copy the code
2. The box – ordinal – group properties
Box-ordinal-group defines the display order of the child elements, the smaller the number, the higher the order.
.item{ -moz-box-ordinal-group: 1; /*Firefox*/ -webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/ box-ordinal-group: 1; }
Copy the code
The box-direction attribute uses an integer value:
.item{ box-ordinal-group: <integer>; /* Display order: < an integer. The default value is 1 }
Copy the code
The new syntax defines the display property of the container
.box{ display: -webkit-flex; /*webkit*/ display: flex; }
/ * inline flex * /
.box{ display: -webkit-inline-flex; /*webkit*/ display:inline-flex; }
Copy the code
The container style
.box{ flex-direction: row | row-reverse | column | column-reverse; / * principal axis direction: left to right (the default) | | | right to left to the top to the bottom of the bottom up * / flex-wrap: nowrap | wrap | wrap-reverse; / * line: no newline (default) | | a new line and the first line of a new line below * / flex-flow: <flex-direction> || <flex-wrap>; /* Main axis and newline shorthand */ justify-content: flex-start | flex-end | center | space-between | space-around; / * main shaft alignment: left aligned (default) | | center aligned right aligned on both ends of the | | * / average distribution align-items: flex-start | flex-end | center | baseline | stretch; / * cross shaft alignment: at the bottom of the top alignment (default) | | center aligned | up and down and covered with | text baseline aligned * / align-content: flex-start | flex-end | center | space-between | space-around | stretch; / * main shaft alignment, the top centered alignment aligned (default) at the bottom of the | | | fluctuation aligned and covered | fluctuation average distribution * / }
Copy the code
Child element attribute
.item{ order: <integer>; /* Sort: The smaller the value, the higher the rank. Default is 0*/ flex-grow: <number>; /* default 0 */ /* Zoom in: defaults to 0 (if there is no space left, zoom in if the value is 1, 2 is double the size of 1, and so on) */ flex-shrink: <number>; /* default 1 */ /* Shrink: defaults to 1 (shrinks if space is insufficient, and does not shrink if the value is 0) */ flex-basis: <length> | auto; /* default auto */ /* Fixed size: default is 0, you can set the px value, you can set the percentage size */ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>] /* Short for flex-grow, flex-shrink, and flex-basis. The default value is0 1Auto, * / align - self: auto | flex - start | flex - end | center | baseline | stretch;/ * alone alignment: auto (default) | top alignment aligned at the bottom of the | | center alignment | up and down and covered with | text baseline aligned * / }
Copy the code