Mobile-side web development

1, whether it is PC or mobile, the development of the page is running on the browser;

2, mobile device browser is mostly based on the WebKit core, belongs to the Advanced browser support H5 C3 features;

Viewport concept

①: PC-side viewport depends on browser size (HTML)---screen size

②: Mobile viewport by mobile phone manufacturers 980, because at that time many of the alleys are 980 and according to the width of mobile phone devices, such as reducing the page.

There is a problem: some of the content on the page is unclear. Think: Can the viewport of the mobile end be equal to the phone device width?

Mobile-Based Development basics

<meta name= "Viewport"

Content= "Width=device-width",//width of viewport equal to device width

user-scalable = "No",//does not allow the user to scale the size with the finger

Initial-scale= "1.0",//Initialize scaling to 1, do not scale

Maximum-scale= "1.0",//maximum zoom ratio of Web page

Minimun-scale= "1.0"//web Minimum zoom ratio

Mobile-side Layout method

1. Flow layout--hundred percent layout

Basic point: The Width,padding,margin attribute is expressed in the form of hundred percent.

Main: In the hundred-percent world, padding,margin four directions are relative to the height of the parent element.

Practical Project Introduction

1. Create File Schema css,js,images,index.html

2. Page layout

From the top down, from left to right, from outside to inside

3. Public style settings

*,*::before,*::after {margin:0; padding:0; Box-sizing:border-box}

A {color: #000; text-decoration:none;

-webkit-tap-highlight-color:transparent; Mobile-specific, remove phone tapping background highlighting

}

Body {background: #f5f5f5; font-size:12px;}

UL {List-style:none;}

textarea {resize:none;//disable dragging of text fields, note: Browsers are not supported, but inline style support }

input {border:none; outline:none;}

Note: The font size of all browsers is 16px by default

Experience Value accumulation:

1) when a block-level element is set to absolute or fixed positioning, the block-level element becomes the inline block element. Need width:100% at this time

2) Mobile Web page in header {height:40px;}

Header layout: Left and right-absolute positioning, intermediate search box 100%, two sides with padding open;

3) The mobile side of the picture is different from the PC side, cause: screen pixel density ratio = physical pixels/css pixels =window.devicepixelratio
Cause: Apple RETINA

About the screen width of the apple phone

①iphone 5, iphone 5s 320px 2 (DPR)

②iphone 6 375px 2 (DPR)

③iphone 6s, iphone 6s+ 414px 3 (DPR)

Conclusion: usually prepare 3 times times the image size of the HD image

How to measure image size in PS:

1, the shortcut key M, the selection tool after the measurement; if you choose less precise, select-Transform selection readjust

Operation of the Sprite diagram: 1, Background:url 2, background-size (twice times the original image) 3, background-position (precise positioning-reduced by twice times)

Mobile-side web development