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

This article introduces the relevant knowledge of "how to achieve responsive web layout in web". In the operation of actual cases, many people will encounter such a dilemma, so 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!

1. Essentials of Flex layout

Flexible Layout: flexible layout

Bootstrap: grid layout

The product is to do business, the product is to serve the business. The framework can meet more than 90 percent of the needs.

CSS1:display:block

CSS2:display:table

CSS3:display:flex; display:box; display:grid

In a practical case, design the page of the following figure:

Analysis page:

There are three lines as a whole, and header accounts for 20% of the total page, 60% of the page, 60% of the page, and 20% of the page.

Responsive layout, which can be automatically zoomed in and out with the page size.

Container: flex container

Page layout-containers, and small containers can also be placed in the container.

Local: flex-direction:column

There is lateral in the part.

Overall: flex-direction:row

The overall layout is horizontal.

The whole page can intersect horizontally and vertically.

Hands-on experiment-Flex box layout

Narrow screen mode: Mobile First

Mobile phone is preferred, because in the era of mobile Internet, the proportion of using mobile phone to view pages has exceeded that of PC, so consider Mobile Fierst first when making pages.

The biggest difference between mobile phone and PC display is not the resolution, but the difference in display scale. The mobile phone is in narrow screen mode and the PC is in widescreen mode.

The page does not need to do two sets, but is based on media query (Media query) and automatically detects whether it is narrow-screen mode or widescreen mode.

In narrow screen mode, the main region is arranged horizontally, while in wide screen mode, the content of main region is arranged vertically.

Widescreen mode:

Hands-on experiment

Create a new file in vscode with the extension html.

Enter html in the code editing area to select html5, and vscode will automatically fill in the fixed content of html5:

Install the plug-in Live Server for vscode, and then select "open with live server" from the right mouse button in the html file editing area to quickly see the page display effect.

First make the layout, then write the style.

Header nav article aside footer

The finished style is as follows:

The programming tool Visual Studio Code is used to write the web page, and Bing search is recommended by foreign software.

Next add style: add style between label and label.

.container {display: flex; height: 100vh; flex-direction: column;} .main {display: flex; flex: 1; flex-direction: column;} .main .article {flex: 1; background-color: yellowgreen } .main .nav, .main .aside {background-color: bisque;} .header, .footer {background-color: green; height: 20vh;}

The effect of adding style

Note the description height in .container: 100vh; (height 100%), .header, and description height:20vh; in .footer (height 20%). Writing a web page is best written as a percentage, not as an absolute value. Write absolute values cannot be scaled. Zooming in and out of the page will automatically zoom in and out when written as a percentage.

Media query, that is, to determine the display device, currently narrow screen priority (adapt to the mobile phone) has been completed, and then write code to determine whether wide screen, write wide screen priority (adapt to PC) code.

@ media screen and (min-width:400px) {.main {flex-direction: row;} .main .nav, .main .aside {flex: 00 20vw;}}

Min-width:400px means to switch the layout mode when the screen width ratio is greater than or equal to 400px. (the teacher starts to set 576, which often does not switch to widescreen mode, and the trigger condition number is too large.)

The above is the flex box layout mode.

II. Bootstrap grid layout

For the front-end template produced by Twitter, the teacher recommended to use the bing international version to check the official website https://getbootstrap.com/, and check the information on the official website.

(the video shows that the bootstrap version of the official website is 4.1.3. It is inferred that the video was released 2 years ago.)

Practice case:

Find the card template from bootstrap:

Import a link to bootstrap in head

Make 2 copies of card and finally complete the code.

Document

Card title Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card effect 1, after direct replication, the card is arranged longitudinally into 3.

If you add container, there will be white space and spacing. One of the most important skills in web design is proper white space, neat white space and spacing.)

The bottom line of container says the layout is "row", and now the cards are arranged horizontally. Note: bootstrap layout gives priority to mobile phones.

Then adjust the style

Body {margin-top: 1em; margin-left: 1em;} .mycard {margin-right: 1em; margin-bottom: 1em;}

Marin-top refers to the top margin, marin-left refers to the left margin, marin-right refers to the right margin, and marin-bottom refers to the bottom margin.

1em refers to a character high or wide of the current font size. 15px means 15 pixels.

Customized .mycard to specify a space between the right side and the bottom.

Add mycard constraints to the three card below.

Pay attention to the hierarchical sense of the picture, the background should not be all white, for example, many pages of JD.com have gray backgrounds.

Add background-color:#f4f4f4 to body, do not use gray, use gray color is too dark, # f4f4f4 white with gray background is just right.

Then modify the image displayed in the card header, search for free images on Bing, and link them in the middle of the double quotation marks of src= ".

Adjust the overall margin, card margin and card width to 14rem.

Final code:

Final result:

The advantage of using the template is to automatically adapt to different devices and different resolutions, when the screen width is large, you can display 3 card per line, the smaller screen automatically adjusts to 2 card, and when the screen narrows, it automatically adjusts to 1 card per line.

This is the end of the content of "how to achieve responsive web layout in web". 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.