Tips for mobile-side layouts

1. Font size Font-sizepx/em/rem

• px pixels
• EM: Depending on the font size of the parent, 1em means the parent font is the same size
• REM: Depending on the font size of the HTML tag, the 1REM represents the same size as the HTML label font, the default 16px,
• REM: Set Nrem. Indicates that the font size is set to the font size of the HTML tag and the default font-size:16px if the HTML is not set;

2. Custom fonts: Font Name 2 font src:url+format

<style>     @font-face{font-family: "Demo font"; Src:url ("Path Address") Fromat ("TrueType");       }     . customfont{       font-family: "Demo font";     } </style><p>one</p><p class= ' Customfont ' >two</p>

3. Centering the problem of matching

The first method. box{

Write a legacy flex before adapting to the new version

Display:-webkit-box;

Set Horizontal Center

-webkit-box-pack:center;

Set Vertical Center

-webkit-box-align:center;

Adapting to the new Flex

Display:-webkit-flex;;

Display:flex

Set Horizontal Center

-webkit-justify-content:center;

Justify-content:center;

Set Vertical Center

-webkit-align-items:center;

Align-items:center;

/* In the mobile Web, when using flex layout, in order to render better, first write the old version of Flex, and then the new version */

The second type: Calc is a CSS3 property, but is not compatible in Android UC Browser, generally no longer moves the Web using parent settings relative.son{Position:absolute;  Left:-webkit-calc (50%-50px); Left:-moz-calc (50%-50px) Left:calc (50%-50px) Top:-webkit-calc (50%-50px);//Note that the operator needs to keep a space before and after it; Top:-moz-cal  C (50%-50px) Top:calc (50%-50px)} The third type: parent settings relativebox{Position:absolute;  width:100px;  height:100px;  left:50%; top:50%;

-webkit-transform:translate (-50%-50%);
-moz-transform:translate (-50%-50%);
-ms-transform:translate (-50%-50%);
-o-transform:translate (-50%-50%);
Transform:translate (-50%-50%);
}

The fourth kind: box{Position:absolute;  width:100px;  height:100px;  left:50%;  top:50%;  margin-top:-50px;  margin-left:-50px; }

Note : When positioning, be sure not to forget to write top, left, right, bottom value. Although on some phones do not write the style will not be confused, it seems that no problem. But in order to ensure that in case, be sure to write. Don't make such a low-level mistake.

Before writing the mobile side of the page when the time to forget to write the values of these properties, but directly with Margin-left, Margin-top direct positioning, the results found on the Apple mobile phone has appeared on the layout of the offset problem.

  position:absolute/fixed/relative;     left:0;     right:0;     bottom:0;     top:0;

4. Focus on flexible layout flex compatibility issues:

Flexible layout is easy to use, but the compatibility is not very good, in addition to browser implementation is different, PC and mobile side is also different.

Both Display:flex and Display:box are used for flexible layouts. Display:box is the name of 2009, and Display:flex is named after 2012. However, Display:flex cannot be fully backwards compatible, and some browsers do not support it. (Display:box rarely used)

div{//2009 after the browser takes effect display:-webkit-box;//2011 after the browser takes effect display:-webkit-flex;//2012 after the browser takes effect Display:flex;}

Display:flex

PC side: Chrome and Firefox support are very good, ie does not support.

Mobile side:

• IOS Safari Support, UC support, browser not supported
• Android Native browser UC is not supported

Display:box

PC side: Chrome and Firefox support are very good, ie does not support.

Mobile side:

• IOS Safari Support, UC support, browser not supported
• Android Native Browser UC support

Summed up: IE is not supported, so this technology is ideal for mobile, because the mobile browser core is basically webkit.

. Container{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 ten */display:flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */}

5. Text overflow hidden display ellipsis

Single-line Syntax:

. text{  Overflow:hidden;  text-overflow:ellipsis;  White-space:nowrap;    }

Multi-line Syntax:

. text {  Overflow:hidden;  text-overflow:ellipsis;  Display:-webkit-box;  -webkit-line-clamp:2;  -webkit-box-orient:vertical;}

Directly with the CSS property settings (only the-webkit kernel has a role) the mobile browser is mostly WebKit kernel, so this method is suitable for the mobile side;

• -webkit-line-clamp is used to limit the number of lines of text displayed in a block element, which is an irregular attribute (unsupported WebKit property) that does not appear in the draft CSS specification.
• Display:-webkit-box The object as an elastic telescopic box model.
• -webkit-box-orient Sets or retrieves the arrangement of child elements of a telescopic box object.
• Text-overflow:ellipsis use ellipsis "..." to hide out-of-range text in case of multiple lines of text

6. Mobile Web Touch Events

6.1on and AddEventListener

1. The corresponding event in AddEventListener is not prefixed with an on prefix (onclick-->click)

The 2.on event is added multiple times, and the last time the AddEventListener event is added will take effect each time.

3.addEventListener: The order of execution is the bubbling rule: from small to large (from son to ancestor)

4.addEventListener: Event capture sequence rules: from big to small (from ancestor to son)

AddEventListener parameter Explanation: Element.addeventlistener (event, function, usecapture) Parameter 1: Must, string, specify event name, do not need to add on parameter 2: must, functions, specifying the function parameter to be executed when the event is triggered 3: optional, Boolean, specifies whether the event is captured or the bubbling phase performs true: event handle is executed in the capture phase false: By default, events are performed in the bubbling phase this article speaks in detail about the difference between the two 6.2 Adding event listeners using AddEventListenerAddEventListener (' Touchstart ', function (e) {}) indicates that the hand touches the screen is triggered, regardless of the current number of fingers addeventlistener (' touchmove ', function (e) {}) Represents a page scrolling event AddEventListener (' Touchend ', function (e) {}) that triggers when a hand touches the screen, triggering E.preventdefault () to block the default trigger

AddEventListener (' Touchmove ', function (e) {console.log (e.target);//The current element object that represents the hand touches console.log (e.touches); All touch points on the page console.log (E.touches[0]); Touches[0] The first element of a touch point has many parameters that can be used})

The event events parameter Targettouches all touch points on the page for all current touch points of the target element changedtouches all touch points touches on the page touches[0] There are the following properties in each touch point we can get the following properties-ClientX: Touch the x-coordinate of the target in the viewport. -ClientY: Touch the y-coordinate of the target in the viewport. -PageX: Touch the x-coordinate of the target in the page. -Pagey: Touch the y-coordinate of the target in the page. -ScreenX: Touch the x-coordinate of the target in the screen. -ScreenY: Touch the y-coordinate of the target in the screen. -Target: The DOM node coordinates of the touch

Tips for mobile-side layouts