Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what are the ways of bootstrap mobile terminal layout". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First, I will briefly introduce the mobile end cloth.

There are eight ways of the Bureau:

1. Fixed layout

two。 Flow layout

3. Floating layout

4. Positioning layout

5. Mixed layout

6.flex layout

7.rem layout

8. Responsive layout

9. Holy Grail layout 10. Flying * double wing layout

1. Add it well in the fixed layout method, and then set the corresponding width according to the design draft, which is similar to the PC end in other places. The advantage train of thought follows the PC end, but it is quick to get started and has disadvantages.

The large-screen mobile phone displays a wide web page, while the fixed layout width reference is always a fixed width (the size of the design draft), resulting in gaps on the left and right sides. The white space on both sides of the phone is brighter when the phone is horizontal.

two。 Flow layout

Method

Applicable percentage (%) is used as a unit.

The advantages can better adapt to each screen resolution of the mobile phone. Shortcoming

It is not flexible enough to change the values of other elements when you add elements.

3. Floating layout method

Float+clearfix (clear float)

/-- do not need to be compatible with the old version-- /

. Clearfix:after {

Content: ""

Display:block

Clear:both

}

-- need to be compatible with the old version-- /

Clearfix:after {

Content: ""

Display:block

Clear:both

Height:0

Visibility:hidden

}

* * advantages * *? This is the traditional way of floating, the writing method is simple, and the effect is crisp. ? * disadvantages * * are strict with floating elements, and the layout is not very flexible.

4. The positioning and layout method is very commonly used in layout, and it is easy to realize by using the specific values (top/left/right/bottom) of the four directions of position+ to cooperate with each other.

Easy to implement, positioning is very common on the mobile end, especially pop-up windows

. Mask {

Position:fixed

Left:50%

Top:50%

-webkit-transform:translate3d (- 50% mai 50% meme 0)

Transform:translate3d (- 50% mai 50% meme 0)

}

Shortcoming

When positioning is frequently used on the mobile end, some inexplicable bug will appear.

Fixed+input has bug on ios, and elements that use fixed layout will be messed up. When the input box gets the focus on the android phone, the breathing keyboard will show that the positioning element is lifted to the top of the phone keyboard. (understand)

5. The hybrid layout method is called hybrid layout, which is to apply all the knowledge learned flexibly to the layout. For example: rem+ percentage (mobile layout) flex+rem and other advantages of flexible layout, combined with the advantages of other layouts to meet their own layout requirements

The code is a bit cumbersome; the code is not uniform and difficult to maintain

6.flex layout (key)

Method

Also known as flexible layout.

/-- only need to set the parent element-- /

{

Display:-webkit-box; / android2.1-3.0 ios 3.2-4.3 /

Display:-moz-box; / firefox/

Display:-webkit-flex; / chrome 21 years /

Display:-ms-flexbox; / wp ie 10/

Display:flex; / android 4.4/

}

/-- then the child element sets the appropriate scale-- /

{

-webkit-box-flex:1

-webkit-flex:1

-ms-flex:1

Flex:1

}

This is the simplest flex layout, in fact, there are many simple, efficient and practical properties in the elastic layout, which is very convenient for the layout of the mobile end.? ? * advantages *? Self-adaptation is very good, flexibility is very strong, at present, it is still widely used in mobile.? ? * disadvantages * * need to write a lot of compatible code.

7.rem layout method rem is adapted through the root element. The root element in the web page refers to html. We can control the size of the rem by setting the font-size size of the html. There are two ways to adapt:

1.rem+@media (set the font-size value of html through media query to achieve self-adaptation)

Html {

-webkit-text-size-adjust:none

Font-size:10px

}

@ media screen and (min-width:321px) and (max-width:375px) {

Html {

Font-size:10px

}

}

@ media screen and (min-width:376px) and (max-width:414px) {

Html {

Font-size:10.25px

}

}

@ media screen and (min-width:415px) and (max-width:454px) {

Html {

Font-size:10.5px

}

}

@ media screen and (min-width:455px) and (max-width:554px) {

Html {

Font-size:10.75px

}

}

@ media screen and (min-width:455px) {

Html {

Font-size:11px

}

}

2.rem+js (the width of the device is automatically obtained through js, and the font-size value of html under the corresponding device is calculated to achieve self-adaptation) (understand)

! Function (n) {

Var e=n.document

T=e.documentElement

ITunes 720

Dempi / 100

O = "orientationchange" in n? "orientationchange": "resize"

A=function () {

Var n=t.clientWidth | | 320

N > 720 & & (nasty 720)

T.style.fontSize=n / d + "px"

}

E.addEventListener & (n.addEventListener (o, a,! 1), e.addEventListener ("DOMContentLoaded", a,! 1))

} (window)

The advantages can be fully adapted to any device, and the page layout style is completely self-adaptive.

Rem+@media cannot be fully adapted to all devices.

8. The responsive layout method uses @ media (Media query) to set the page to be adaptive in different screen widths and responsive (according to different screen size, page layout, style will be adjusted accordingly) typical case (bootStrap official website) advantages not only achieve self-adaptation under different screens, but also make corresponding adjustments to page layout and style under the corresponding screen, so as to achieve more user experience shortcomings.

Compatible with a variety of equipment workload, low efficiency; code cumbersome, there will be hidden useless elements, loading time is too long; to a certain extent, changed the original layout structure of the site, there will be user confusion; increase the workload of UI and development.

9. Holy Grail layout

Using float to achieve, first put three columns in a parent element and then float on the left, and then set the width 200px250px10100% to the left and right respectively.

After that, set the margin-left to-200px and to the right to-200px. After that, the left and right columns are relatively positioned position:relative; and set left:-200px;right:-250px; respectively. Finally, the contour layout is achieved. Set padding-bottom:2000px;margin-bottom:-2000px; to the left, middle and right, and set overflow:hidden to its parent element.

This is the end of the content of "what are the ways of bootstrap mobile layout". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.