Home > Developer > Web Develop
Review above: Hybird Framework UI refactoring path: Iv. Divide and conquer
Here are some of the key points of HTML and CSS in the development process.
page structure in single page modeIn single-page mode, the concept of weakening HTML, the HTML as a container, body display of the main content is the page, an HTML container can hold 1 or more pages, each page is placed in the section. A page (section) must have a main content (content), or it may contain header contents, bottom content, or even some side-by-side menus.
So, the page code for the top title and the main content is included in the interface of a mobile app that we usually see as follows:
<!DOCTYPE HTML><HTMLLang= "en -us"><Head><Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8" /><Metaname= "Format-detection"content= "Telephone=no" /><Metaname= "Viewport"content= "Width=480,user-scalable=no" /><Linkrel= "stylesheet"href= "Css/bingotouch.css" /><Linkrel= "stylesheet"href= "Css/app.css" /><!--function Library -<Scriptsrc= "Js/cordova.js"></Script><Scriptsrc= "Js/zepto.js"></Script><Scriptsrc= "Js/iscroll.js"></Script><Scriptsrc= "Js/baidutemplate.js"></Script><Scriptsrc= "Js/bingotouch.js"></Script><Scriptsrc= "Js/app/app.js"></Script><title>Bingotouch</title></Head><Body> <DivID= "Section_container"> < SectionID= "Index_section"class= "Active"> <Divclass= "header"data-fixed= "Top"> <Divclass= "title Row-box"> <Divclass= "Box-left"> </Div> <Divclass= "Span1"> <H1>Home</H1> </Div> <Divclass= "Box-right"> </Div> </Div> </Div> <Divclass= "Content"> <H1>Welcome to use Bingotouch</H1> </Div> <Divclass= "Footer"data-fixed= "Bottom"> </Div> </ Section> </Div></Body></HTML>
Here you can see that the basic structure of a single page is a container with a section as a single page, the title navigation header and the contents of the main content are located below the section, and each can display the desired content.
That is, a structure like this:
The fragment page is relatively simple, with the following code:
< SectionID= "Demo_section"> <Divclass= "header"data-fixed= "Top"> <Divclass= "title Row-box"> <Divclass= "Box-left"> </Div> <Divclass= "Span1"> <H1>Demo</H1> </Div> <Divclass= "Box-right"> </Div> </Div> </Div> <Divclass= "Content"> <H1>Welcome to use Bingotouch</H1> </Div> <Divclass= "Footer"data-fixed= "Bottom"> </Div></ Section>
The page fragment is also the section block inside the main page, where other pages are very concise.
ViewportViewport this thing is not described in detail, I just get crazy, a few properties width, height, initial-scale, Minimum-scale, Maximum-scale, user-scalable.
iOS: It's normal on iOS and what's set.
Android: All sorts of strange on Android, it is "stone in Manger". Although there are many articles on the net to viewport, but the description, formula, example of the written one can say yes (I have different mobile phone test), have not been able to fully understand, are a bit wrong, it seems to be wrong. And the company no one can explain it, after I tested, when the test to the 5th model on the measurement is not down, are different, no common characteristics, can only pause (do other things, test things delay).
Now using the settings viewport script in the tested models are no problem, so do not drill down, the code is as follows.
varViewport = "";varUserAgent =navigator.userAgent.toLowerCase ();if(/android (\d+\.\d+)/. Test (useragent)) {Viewport= "WIDTH=DEVICE-WIDTH,INITIAL-SCALE=1,USER-SCALABLE=NO,TARGET-DENSITYDPI = 240";} Else { if(Useragent.match (/ipad/i)) {Viewport= "Width=640,user-scalable=no"; }Else if(Useragent.match (/iphone os/i) = = "iphone OS") {Viewport= "Width=480,user-scalable=no"; }}//Add Viewif($ ("meta[name= ' viewport ')." Length > 0) { $("Meta[name= ' viewport ']"). attr ("content"), viewport);} Else { varelement = document.createelement (' meta '); Element.name= "Viewport"; Element.content=viewport; varHead = document.getElementsByTagName (' head ') [0]; Head.appendchild (Element);}
PS: For not understanding things, I do not like to only one-to-one solution, for example, a model of the viewport settings have a problem, set some properties can be, but may not know why. I hope to understand the essential reason, can do extrapolate later, is I think. Also, if someone understands viewport and has done a test (which is important), can you tell me what you understand and ask for communication?
FlatFlattening is not a new thing, many of the company's projects are now a gradual style, mainly reflected in the header, footer, button and other controls. Flattening, however, simply removes the effect of the gradient and is nothing special.
iconsThere are two kinds of icons, one is the picture icon and one is the font icon.
I have an article about: http://www.cnblogs.com/lovesong/p/4115991.html
SummaryI did not write the specific content of the development (too many things, no way to finish a few articles, there is no need, after all, the idea is the right path), but also not to talk about, to introduce my development of the way, method, step, and a little key front-end issues. This article for the original article, reproduced please retain the original source, convenient traceability, if there is the wrong place, thank you correct. This address: http://www.cnblogs.com/lovesong/p/4297182.htmlHybird Framework UI Refactoring Path: V. The front-end thing (HTML, CSS)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
