www.ruanyifeng.com/blog/2015/0… www.jianshu.com/p/4290522e1… www.cnblogs.com/zhuzhenwei9… Blog.csdn.net/weixin_4407… Developer.mozilla.org/zh-CN/docs/… Blog.csdn.net/Lyrelion/ar…

Mobile Web Development Layout (I) – Streaming layout, Flex layout

directory

I. Mobile terminal foundation

1. Viewport labels

2. 2 times

3. Mobile terminal technology solutions

Ii. Flow (percentage) layout

Flex layout

Flex layout experience

2. Flex layout principles

3. Common properties of the Flex layout parent

4. Common properties of Flex layout subitems

6. Made the home page of Ctrip mobile terminal

---

I. Mobile terminal foundation

• Current situation of Mobile Web development: Mobile browsers are mainly compatible with WebKit kernel, with serious fragmentation and different resolutions and sizes on mobile phones

1. Viewport labels

• ** Mate definition: ** Area of the browser to display page content, including: layout viewport, visual viewport, ideal viewport, as follows

1. ** Layout ViewPort: ** Allows most PC web pages to be rendered on the phone, with elements that look small and can be manually scaled
2. Visual viewPort: ** The area of the web site being viewed
3. ** Ideal viewport **** Ideal Viewport: ** How wide the equipment is, how wide the layout viewport is

• Summary: Ideal viewport = Change the width of the layout viewport to a visual viewport
• Mate attributes:

1. Width =device-width: indicates the device width

2. Initial-scale =1.0: initial scaling ratio

3. Maximum-scale/minimum-scale: indicates the maximum scaling ratio or minimum scaling ratio

4. User-scalable: Indicates whether users can scale. The value is generally no

   <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”>

2. 2 times

2.1 Physical pixels vs. binary images

• Physical pixels: that is, the resolution, the smallest particle displayed on the screen, is real, as set by the manufacturer
• Physical pixel ratio: the number of physical pixels that can be displayed in a px, i.e. 1px is not necessarily equal to one physical pixel
• LRetina a display technology that compresses more physical pixels into a single screen for higher resolution
• Iphone8 Physical pixel 750, 1px development pixel = 2 physical pixels, 50*50 (development pixel) will be magnified twice in iphone8 display
• Solution: prepare 100 x 100 (development pixels) image, manually shrink to 50 x 50, put in iphone8 will become original 100 x 100

2.2 Background zooming

• **background-size: xx; : ** Background image width background image height; Units can be px or % (compared to the parent box)
• **background-size: cover; : ** Make the background image completely cover the background area, including the width and height of the divs
• **background-size: contain; Make the background image width or height completely fit the content area, not necessarily all over the div

3. Mobile terminal technology solutions

3.1 Development Selection

1. Independently make mobile terminal page (mainstream) : PC terminal, mobile terminal two sets of styles
2. Responsive page compatible with mobile terminal (second) : PC and mobile terminal a set of style automatic adaptation

• Matters needing attention:

1. Consider only WebKit compatibility, and the browser’s private prefix only needs to consider adding WebKit
2. Mobile common Style Normalize.css (incorporated in Bootstrap)
3. H5C3 and C3 box models can be used extensively

3.2 CSS3 box model

• **box-sizing: content-box; (Traditional box model) : ** The default style, width+border+padding, border and padding will stretch the box
• **box-sizing: border-box; (CSS3 box model) : **border and padding do not stretch the box and need to be written separately
• Mobile can all CSS3 box models
• If PC side needs compatibility, use traditional mode; If compatibility is out of the question, choose the CSS3 box model

3.3 Special Styles of mobile Terminal

• Clear highlighting, full transparency: -webkit-tap-highlight-color: transparent
• Change the default style for buttons and input boxes: -webkit-appearance: None
• Disable long pop-up menus (images, hyperlink Settings) : -webkit-touch-callout: None

3.4 Common Mobile Layout

• Mobile terminal made separately:

1. Streaming layout (percent)
2. Flex Flex Layout (recommended)
3. Less + REM + Media query layout
4. Hybrid layout

• Response:

1. Media queries
2. bootstarp

Ii. Flow (percentage) layout

1. Streaming layout definition

• A streaming layout, also known as a percentage layout, ADAPTS to screen changes by setting the width as a percentage, rather than a fixed pixel

• To keep the content within a reasonable range, set the maximum width of max-width and the minimum width of min-width

  Section {/* Layout changes with screen width */ width: 100%; max-width: 980px; min-width: 320px; }Copy the code

2. Make the home page of JINGdong mobile terminal

2.1 Preparations

• Initialize the base folder:

• In index.html, set the viewport to introduce basic common styles + your own CSS styles

  // Import the CSS initialization file // import your own home page CSS

2.2 Top Making

• 

• HTML structure:

  The ul-LI contains four parts, the first two Li insert picture, the last two Li insert text

  <header class="app">        <ul>            <li> <img src="" alt=""> </li>            <li> <img src="" alt=""> </li>            <li></li>            <li></li>        </ul>    </header>
  Copy the code

• CSS style ① : Specify the height of the header module, let the UL-LI float on a line, set the common style in the LI (color, line height, center, etc.)

• CSS style 2: Set the percentage of width occupied by each li, and specify a separate fixed width for the images in li, as in:

  app ul li:nth-child(2) { width: 10%; }.app ul li:nth-child(2) img { width: 30px; vertical-align: middle; }

2.3 Location search production

• 

• The search div contains three divs: search button, search box and login

• The search box contains two divs: JD icon and magnifying glass icon

• CSS style ① : Search div should be set to fixed, specify maximum and minimum width to protect content, specify 100% width + fixed height

• CSS style ② : The search button uses absolute positioning, specifies a fixed size, converts to block elements with ::before, inserts and scales the background image, such as:

  .search-btn::before { content: “”; display: block; width: 20px; height: 18px; background: url(.. /images/s-btn.png) no-repeat; background-size: 20px 18px; / The actual background image is larger than this/margin: 14px 0 0 15px; }

• CSS style 3: search box part without a given width, but to margin, so that it ADAPTS to screen changes, JD icon background zoom with the front

• CSS style 4: JD icon behind the vertical line, using JD after the append ::after→ absolute positioning → block element → set the width and height color

• CSS style ⑤ : Zoom in Sprite: Scale the Sprite to x times its original size and measure the corresponding position

2.4 Main Part

2.4.1 Brand day production of small household appliances

• 

• HTML structure: the large div contains three small div, click the corresponding part will enter different pages, using the insert link image

  

  

  

• CSS style: large div width 33.33%, float, each div image width is 100% of each div, note to clear float

2.4.2 nav production

• 
• HTML structure: contains 10
• CSS style: Float the A element so that it is displayed on a single line, with 20% width for each element to make redundant wrapping

2.4.3 News module

• 

• HTML structure: div contains three

• CSS style ① : Float the A element in a row, set it to a C3 box model, so that the border will not easily make width more than 100%

• CSS style ② : Allocate width ratio of a element + border

  .news a:nth-child(1) { width: 50%; }/* news a:nth-child(n+2) {width: 25%; border-left: 1px solid #ccc; }

2.5 Comprehensive effect display

• 

Flex layout

Flex layout experience

• Traditional layout: good compatibility, cumbersome layout, limitations: mobile terminal layout is not very good
• Flex layout: Simple, easy to use, poor PC compatibility, flex is not supported in IE11 or later
• Summary: Traditional layout for PC, mobile or incompatible PC, flex layout

2. Flex layout principles

• Flex layout principle: Add Flex properties to parent boxes to control how child boxes are arranged
• When the parent box is set to flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated
• Flex layout is also called flex layout, elastic layout, flex box layout, or elastic box layout

3. Common properties of the Flex layout parent

• Flex-direction: sets the spindle direction
• Flex-wrap: Sets whether a child element is wrapped on a line
• Flex-flow: column wrap; flex-direction: column wrap;
• Context-content: Sets the arrangement of child elements on the main axis
• Align-content: Sets the arrangement of children on the side axis (multiple lines)
• Align-items: Sets the arrangement of child elements on the side axis (single row)

3.1 Flex Setting the spindle Direction

• The default axis in the Flex layout is the X-axis, which can be reoriented and the child elements are aligned with the axis
• flex-direction:column / row; Change the main axis to y/x, vertical/horizontal
• Be sure to add: display:flex;

3.2 context-content Sets the arrangement of child elements on the main axis

• Context-content: flex-start/end: Child elements are displayed at the head/tail of the main axis
• Context-content: center: child elements are aligned in the center of the main axis.
• Illustration-content: space-around: child elements divide the remaining space.
• 18. Preception-content: space-between: child elements are bounded on both sides before dividing the remaining space.

3.3 Whether the flex-wrap child element is newline

• Flex-wrap :nowrap; If not, the child element is shrunk and placed inside the parent element
• Flex-wrap :wrap;

3.4 align-items Sets the arrangement of axis elements (single row)

• Align-items Sets the alignment of the side axis elements, used when the child items are single items
• Align-items: flex-start/end Start from the beginning/end
• align-items: center; : Center display.
• align-items: stretch; : To stretch the child element, do not set the height of the child element, otherwise the stretch will not work.

3.5 align-content Sets the arrangement of side axis elements (multiple lines)

• Align-content sets the alignment of the side axis elements, used if the child is a newline (multiple lines) (not valid if the child is a single line)

• align-content: space-around; : Evenly distribute the remaining space.

• align-content: space-between; :

• align-content: center; : Center and align.

4. Common properties of Flex layout subitems

4.1 Use of flex attributes for subitems

• Flex: Sets the amount of free space for child elements. .item {flex: 2; }

• Remaining space = width of parent box – width of box with no Flex set

• Scale calculation: flex value of current subbox/sum of Flex of all boxes

  p span { flex: 1; } p span:nth-child(2) { flex: 2; }

•      

• 

4.2 align-self Sets a subbox arrangement separately

• Align-self: Sets the arrangement of a box individually, overriding the align-items property
• Exp: div span:nth-child(3) {align-self: flex-end; } Separate the third box from the bottom.

4.3 Order Defines the order of subboxes

• Order: The smaller the value is, the higher the order is. The default value is 0. Item {order: -1; }
• Exp: div span:nth-child(2) {order: -1; } puts SPAN2 ahead of SPAN1 in ignoring HTML structures.

5 Background Gradient – webkit-Linear-gradient (must write private prefix)

/* Background gradient must be added with the browser's private prefix */background: -webkit-linear-gradient(left, red, blue); /* Gradient from left to right */background: -webkit-linear-gradient(red, blue); */background: -webkit-linear-gradient(top left, red, blue); /* Gradient from top left to bottom right */Copy the code

•                  

6. Made the home page of Ctrip mobile terminal

6.0 Solution Technology

• Adopt a separate mobile page solution, using Flex layout technology

6.1 Top fixed search search making

• 
• HTML structure: The large div contains a search div and an A tag for the user.
  </>
  </> </>

• CSS style ① : The parent box is set to fixed positioning (so must have a width of 100%+ Max/min width), fixed height
• CSS style 2: The search box is relatively positioned, with rounded corners, content margins, and shadows. The remaining part is 1
• CSS style 3: The magnifying glass icon in the search box, use ::before to absolutely locate, specify the width and height, use Sprite as the background, remember the double image background zoom

6.2 Creating the search module user

• User style width, height are fixed

• The left search box flexes, so set the parent element display: flex; , left search box set flex: 1;

• .user::before: Used to insert user profile picture, specify width and height, Sprite background, double image background zoom

  .user::before { content: ""; display: block; width: 23px; height: 23px; background: url(.. /images/sprite.png) no-repeat -59px -194px; background-size: 104px auto; margin: 4px auto -2px; }Copy the code

6.3 Focus diagram Focus module production

• 
• HTML structure: Insert image into div
• CSS style ① : picture width:100% can be achieved with the screen width change

6.4 Making local-nav of local navigation Bar

• 

• HTML structure: five Li, li contains a, a contains two span for ICONS and text

  .

  • CSS style ① : 5 Li are evenly distributed in a row, so set the flex layout for the parent box and Flex: 1 for li

  • CSS style ② : THE structure of A in Li is the icon text displayed up and down, so turn on Flex for A, and change the main axis to vertical axis, and center the side axis

  • CSS style ③ : SPAN in a, put the icon in the first half of the unified class name, take the background zoom to set the overall style, and then set separately, such as:.

    .local-nav li [class^=”local-nav-icon”] { width: 32px; height: 32px; background: url(.. /images/localnav_bg.png) no-repeat 0 0; background-size: 32px auto; }. Local-nav li. local-nav-icon-icon2 {/+ + +/ background-position: 0-32px; }

  6.5 Lead navigation bar NAV making

  • 

  • HTML structure: three large div rows, each containing three columns, each containing a different number of a

    / * * / div

    / * * / div

    
    

    
    

  • CSS style ① : Line div should be fixed height and display:flex; Div flex=1; Split the row div into three parts

  • CSS style ② : Column div should set display:flex and set the main axis to change (because the a inside is arranged vertically)

    . Nav-items {/* non-conflicting */ flex: 1; display: flex; flex-direction: column; }

  • CSS style 3: column A in div should be set to flex=1 to ensure column splitting. Text-shadow :1px 1px rgba(0, 0, 0,.2);

  • CSS style ④ : The first child a in column div should insert the background image

    .nav-items:nth-child(1) a { background: url(.. /images/hotel.png) no-repeat bottom center; / background-size: 121px auto; / background zoom /}

  • CSS style ⑤ : The first child (first line) in the line div should have a separate gradient background

    .nav-common:nth-child(1) { background: -webkit-linear-gradient(left, #FA5A55, #FA994D); }

  6.6 Creating Subnav-Entry on the Side Navigation Bar

  • 

  • HTML structure: ten groups of Li, each containing a, a containing two span ICONS and text

    <ul class="subnav-entry">        <li><a href="#">                <span class="subnav-entry-icon"></span>                <span></span>            </a> </li>  ...
    Copy the code

  • CSS style ① : Large boxes should be set to display:flex, newline (do not change the element will shrink)

  • CSS style ② : Li should be set to flex:20%; , so each five make up 100%, and the rest wrap

  • CSS style ③ : A in Li should set display:flex, change the main axis to y axis, and center the side axis

  6.7 Sales module Sales-box production

  • 

  • HTML structure ① : Sales module header, including a H2 tag “hot activity” and a tag “Get more benefits”

  • HTML structure ② : Sales module body, containing three lines of divs, each line containing two images wrapped in a

  • CSS style ① : H2 tag emphasis emphasis: input text in H2, indent a lot, beyond the part hidden, so that the browser can see but the user can not see

    .sales-hd h2 { text-indent: -999px; overflow: hidden; }

  • CSS style ② : A tag after ::after, add > icon

    .more::after { content: “”; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }

  • CSS style ③ : Advertisement row parent set display:flex, child a set flex=1 ensure that the row is evenly divided, image set width:100%

  6.8 Comprehensive effect display

  •