The response design of mobile internet

In the company's done on the "mobile internet response Design" share, the following summary content, recorded below

1. The status of mobile internet

2.Web app and native app battle

Web App

Advantages

Low development cost, short cycle

Zero deployment for easy updates and upgrades

Disadvantages

Performance, user experience is subject to browser implementation

It is difficult to apply advanced features of mobile phones, such as photography, gravity sensors, etc.

Native App

Advantages

Ability to maximize mining performance potential

Able to use all the open features of the phone

Ability to continuously improve the user experience

Disadvantages

Large platform difference, difficult development, high cost, long cycle

Let the user install the client is a very low threshold (I do not want to see your site and the next app bar,)

Solution: [Hybird app] Web app development Framework JQTouch, JQuery Mobile and PhoneGap (Geolocation,camera)

3. What is responsive design (responsive Web)?

In short, it is a term coined by Ethan Marcotte in 2010, which is designed to automatically identify screen widths and make appropriate adjustments to the web design, and is also considered for user experience.

4. How to design in response style

The first thing we think of is the width percentage%, if only so he can't solve the real problem

First of all

A. Add a viewport label to the head

Width=device-width: The width of the current Web page is the width of the user's phone screen

initial-scale=1.0: Original zoom ratio, 1 means no scaling

User-scalable=no: Prevent users from scaling screen size

B.media query (media query)

@media screen and (max-width:320px) {

#fixedInput {

width:57%;

}

}

When the screen size of the browser is no larger than 320px, the code executed separately

If this is a lot of code, you can write this, optionally load CSS styles

C. Self-adaptation of pictures

img{

max-width:100%;

Height:auto;

Width:auto9; * IE8 * *

}

D. Flow layout and positioning

Float floats in the page, which floats with the size of the screen.

Sometimes it's better to use positional position:abosulte;

5. Lack of responsive design

A. Load too many resources, such as adaptive pictures are relatively large, small screen phone is still loaded with the same picture, waste of traffic

B. Increase development costs some code at least two times the CSS

C. Different screen of mobile phone visual experience in the final analysis there is a difference

Solution:

Technically

Use offline storage, cache infrequently updated resources such as JS, CSS logo pictures, etc.

Load different sizes of pictures based on different screens

Planning on

Design is based on the mobile phone interface, PC-side supplemented