iOS Client Discovery _ Animation House post page refactoring and suspension Comment sharing Module Development project summary

from "watching the World Cup to send traffic" project, encountered the response layout problem, specialized in this area of professional books, while reading the relevant articles. The responsive layout simply means that the developed page has a friendly effect on different devices. The first "Summer Animation House" project, at that time did not adopt a responsive layout, although the ipad is available, other devices will display problems. This also exposes the problem that is currently in the front of the mobile business unit:

1. Considering that the responsive layout is on different devices, the UI designer only gives a set of UI prototypes, and the display on different devices is based on the understanding or personal preference of the front-end engineer. From the point of view of product managers and testing, there is no extreme requirements for this, basic skills can be met. This requires communication with the UI.

2. From the mobile trend to consider, the company set up a mobile business division in the right direction, in the implementation of the details of the issue is not "mobile". Front-end engineers are limited to their own mobile phone or product manager's ipad or iphone, and the specific Iqiyi users are distributed with no data to support, so that the product facing the ipad or product for the iphone swing. So before development, figure out what the target users are, and apply enough test machines.

Refactoring:

Project Introduction

(i). Development of the "Summer animation house Activity" in the later page

This project is a reconstruction of the project without prior adaptation. Previous articles have pointed out that looking at their own six months ago the code could not read. This project is not long before it is written, and it is not easy to transplant from a refactoring perspective. So we took a more extreme approach to refactoring: rewriting. This rewrite is also the first project to apply a responsive layout technique, independent adaptation.

When the entire layout frame is written, the following are the main things to consider when writing a style sheet:

1. The outer structure of the framework of this project is constructed with div tags and streamlined. Therefore, the following code is taken:

div{width:100%;}

To ensure that each div fills the viewable area with the width of the visible area set by the media query. There is no fixed width here, it is in the media query properties, according to the divided medium different set different but the width based on.

2. The current processing background map in the project is not handy, so the background map is set to the IMG tag, given the "BG" ID. The processing of pictures here is also worthy of reference for future projects.

#bg img{width:100%;}

This extends the background map to the entire viewport width area to meet responsive requirements.

The corresponding download button sets the exact position from the absolute position angle, and the size sets a percentage based on the window size.

#download img{width:25%;p osition:absolute;top:60%;left:70%;}

from the response point of view, different models, the width is set according to the percentage, so the absolute position left parameter will not change, just according to different models, adjust the top value.

3. After setting up the picture and Div, the rest is to adjust the font size and button top parameters according to different models.

/*ipad*/@media only screens and (max-width:1024px) and (min-width:710px) {#download img{top:44%;}} /*iphone4*/@media only screens and (max-width:360px) and (min-height:480px) {#download img{top:22%;} #font1 {font-size:38px} #font2 {font-size:26px} #font3 {font-size:20px}}/*iphone5*/@media only-screen and (max-width: 320px) and (min-height:568px) {#download img{top:19%;} #font1 {font-size:38px} #font2 {font-size:26px} #font3 {font-size:20px}}

the entire project refactoring is complete. The basic essentials of the overall responsive design are the setting of the percentage of Div or other layout elements, the width setting of the picture, and adjusting the position or font size according to different configurations to make the page readable. Post-page development on the basis of this medium-term page, the format of the award-winning users have been processed, the other directly apply this project can be.

(b). Development of "Share Comment module" in the event

As follows:

1. Requirements of the project

Develop a module that can be used for sharing and commenting on a variety of activities, for mobile phones and not for tablet displays.

2. The structure is very simple, the main new place in style.

. share_floatshare{width:100%;margin-left:auto;margin-right:auto;height:100px;position:fixed;bottom:0;z-index : 9999;opacity:0.5;background-color: #000000;}

The above need to pay attention to the position fixed positioning, positioning to the bottom of the page, and by setting the Z-index guarantee, the module at the top of the page. At the same time, the Opacity property is set, the translucent effect is constructed.

3. There are two main aspects of interaction:

Go to the page, remove the number of comments from the background and return to the right button.

Click the left and right button to adjust the appropriate interface, which involves the detection of Android and iOS devices. The code is as follows:

var deviceagent = Navigator.userAgent.toLowerCase ();  var Agentid = Deviceagent.match (/(iphone|ipod|ipad|android)/); if (Agentid.indexof ("iphone") >=0) {          }    if ( Agentid.indexof ("Android") >=0) {}

this uses the UserAgent property to detect the device type, thus jumping to different pages.

4. Modular

Since modularity involves the convenience and stability of module references.

(1) The main purpose of convenience is to use JS native code to generate HTML structure, and generate link tags to introduce the corresponding CSS file. That is, the introduction of the last module simply inserts a JS script block into the target page.

(2) Stability is mainly involved in the introduction of CSS files and the current page does not cause a naming conflict, here will be involved in the ID and class are processed with the share_ prefix, the deletion of redundant content.