April, May Development Summary

Elastic Layout Summary :
Box is first out, flex-out, and now mostly flex.
But the box has a feature that Flex doesn't have, and the text can be vertically centered ~

Display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;

Set the width +padding+border remember add:
Box-sizing:border-box;
-webkit-box-sizing:border-box;

. foo{
Display:-webkit-box; /* Chrome 4+, Safari 3.1, IOS Safari 3.2+ */
Display:-moz-box; /* Firefox 17-* *
Display:-webkit-flex; /* Chrome 21+, Safari 6.1+, IOS Safari 7+, Opera 15/16 */
Display:-moz-flex; /* Firefox + *
Display:-ms-flexbox; /* IE 10 */
Display:flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ * *
}

Summary of form elements :
input {-webkit-appearance:none;}

Automatically adjust font size when you prevent the screen from rotating
-webkit-text-size-adjust is a private CSS for WebKit:

before,after{
Content: ".";
Display:block;
font-size:0;
height:0;
Clear:both;
Visibility:hidden;
}

Media Queries Iphone6 and 6plus

@media only screen and (min-device-width:375px) and (MAX-DEVICE-WIDTH:667PX) and (Orientation:landscape) {
IPhone 6 Landscape
}

@media only screen and (min-device-width:414px) and (max-device-width:736px) and (orientation:portrait) {
IPhone 6+ Portrait
}

Use of REM in CSS3
HTML {
font-size:62.5%;
/*10÷16x100% = 62.5%*/
}
Body {
Font-size:1.4rem;
/*1.4x10px = 14px */
}
H1 {
Font-size:2.4rem;
/*2.4x10px = 24px*/
}

CSS Judging horizontal screen vertical screen
@media screen and (orientation:portrait) {
/* Vertical Screen css*/
}
@media screen and (Orientation:landscape) {
/* Horizontal Screen css*/
}
JS Judge Horizontal Screen vertical screen
Determine the status of the phone screen:
Window.addeventlistener ("Onorientationchange" in Window?) "Orientationchange": "Resize", function () {
if (window.orientation = = = | | window.orientation = = 0) {
Alert (' Vertical screen state! ‘);
}
if (window.orientation = = = | | window.orientation = =-90) {
Alert (' Horizontal screen state! ‘);
}
}, False);
Mobile browser generally support window.orientation This parameter, through this parameter can determine whether the phone is in a horizontal screen or vertical screen state.

Table Tips Memo :
. m-table tbody Tr:nth-child (2n) {background: #f60; color: #fff}

CSS Reset:

@charset "Utf-8";
* {vertical-align:baseline;font-weight:inherit; Font-family:michroma, ' Segoe UI Light ', ' Segoe UI ', ' Segoe UI WP ', ' Microsoft Jhenghei ', ' Microsoft Jas Black ', sans-serif,times; font-style:inherit;outline:0;padding:0;margin:0;border:0;}
Body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td {padding:0; margin:0; }
HTML, body {padding:0; margin:0; font-family: ' Microsoft Yahei '; color: #4a4a4a;}
HTML {font-size:62.5%;}
Body {font-size:1.4rem;background: #F0EFF5;}
A{text-decoration:none;}
A img,: Link img,: visited img {border:0px;text-decoration:none;}
H2{font-weight:normal;}
Table {border-collapse:collapse; border-spacing:0;}
Ol,ul {list-style:none;}
Input,textarea,button{-webkit-appearance:none;}
. por{position:relative;}
. W_63{width:63%!important;}
. Tal{text-align:left!important;}
. m_l20{margin-left:20px;}
. m_t20{margin-top:20px;}
. m_r20{margin-right:20px;}
. Dsn{display:none;}
. Clear{clear:both;}

April, May Development Summary