Mobile Basic Learning 2

Relevant knowledge points in this record, in order to facilitate future inquiries

Filter

　　

/* Filter */
/*0 to 1 or 0%-100% value */
-webkit-filter:grayscale (. 5);
/* Sepia tint */
-webkit-filter:sepia (1);
/* Saturation degree */
-webkit-filter:saturate (. 5);
/* Hue Rotation */
-webkit-filter:hue-rotate (90DEG);
/* Inverse color */
-webkit-filter:invert (1);
/* Transparency */
-webkit-filter:opacity (. 2);
/* Brightness */
-webkit-filter:brightness (. 5);
/* Contrast Ratio */
-webkit-filter:contrast (2);
/* Blur */
-webkit-filter:blur (3PX);
/* Shadow */
-webkit-filter:drop-shadow (15px 15px 15px #ccc);

Elastic box Model

Display:flex;
Flex-direction:row;
/* Set Spindle, default is x*/
/*row (default)
Row-reverse: Invert
Column Vertical
* */
Justify-content:space-between;
Align-items:stretch;
/*
Flex-start: Start position alignment
Flex-end: End Position Alignment
Center: Center
Space-between/space-around: Average distribution


Align-items:
Flex-start: Side axis Start
Flex-end: End of side axle
Center: Center Side Axis
Baseline: Baseline alignment
Stretch: Approximate row size


Flex-wrap: Line break
NoWrap: Single Line
Wrap: MultiRow
The first 2 may be caused by an overflow container for flex children
Wrap-reverse reversal


Align-content Multi-line Flexible Box model container
Stack
* */

/* Child element method
Order:num;
Display order, the larger the number, the more it appears in the back
Supports negative numbers
*
* Flex:
* Scaling ratio
*
* One element of a single
* Align-self: child element Side axis alignment
*
*
* Margin:auto Center up or down
* */

Mobile Auto-refresh and fixed-width mode

<script>
Window.onload=function () {
JS Auto Refresh
Window.addeventlistener (' resize ', setsize,false);
When the screen is up and down
Window.addeventlistener (' Orientationchange ', setsize,false)
SetSize ();
function SetSize () {
var html=document.getelementsbytagname (' html ') [0];
var pagewidth=html.getboundingclientrect (). width;
Limit width
pagewidth=pagewidth>540?540:pagewidth;
html.style.fontsize=pagewidth/16+ ' px ';
Console.log (PageWidth)

}

}

</script>

Touch events

<script>
var Div=document.getelementbyid (' box ');
Add events to the mobile side
/*touchstart when touching the screen
* When Touchmove continuously moves the screen
* When Touchend fingers off the screen
*/



Div.addeventlistener (' Touchstart ', function (e) {
E.preventdefault ();//Cancel Event
Div.style.backgroundcolor= ' Blue ';

},false)
Div.addeventlistener (' Touchmove ', function (e) {
E.preventdefault ();//Cancel Event
Div.style.backgroundcolor= ' Yellow ';

},false)
Div.addeventlistener (' Touchend ', function (e) {
E.preventdefault ();//Cancel Event
Div.style.backgroundcolor= ' Red ';

},false)
</script>

Mobile Basic Learning 2