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

This article mainly introduces the HTML5+CSS3 basic responsive page layout case analysis of the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that everyone after reading this HTML5+CSS3 basic responsive page layout example analysis article will have a harvest, let's take a look at it.

I. the concept of responsive page layout

Responsive layout is a concept put forward by Ethan Marcotte in May 2010. in short, a website can be compatible with multiple terminals-rather than making a specific version for each terminal. This concept was born to solve the problem of mobile Internet browsers.

Second, the advantages of responsive layout

Responsive layout can provide more comfortable interface and better user experience for users of different terminals, and with the popularity of large-screen mobile devices, it is not too much to describe it as "the general trend". As more and more designers adopt this technology, we see not only a lot of innovation, but also some shaping patterns.

Third, the case of responsive layout website (as shown in the following figure):

Core knowledge points

V elastic box model

V media query

4. Elastic box model

Elastic box layout model is a new layout method proposed in css3 specification.

Objective: to provide a more efficient way to layout, align and allocate space for items in the container

Advantages: this layout mode has been supported by mainstream browsers and can be used in web application development.

Description:

1.flex is a property value of display.

two。 The element with the display:flex attribute set is called the Flex container, and all the child elements in it are collectively referred to as container members, called the Flex project. We will introduce it later using the Flex container and the Flex project. The Flex container has two axes: principal axis (main axis) and cross axis (cross axis).

Flex Container Properties

Flex-direction: row | row-reverse | column | column-reverse

Flex-direction:row

Flex-direction:row-reverse

Flex-direction:column

Flex-direction:column-reverse

Justify-content defines the alignment of Flex projects in the principal axis direction

Flex-start | flex-end | center | space-between | space-around

Justify-content:flex-start

Justify-content:flex-end

Justify-content:flex-center

Justify-content:space-between

Justify-content:space-around

Align-items:flex-start | flex-end | center | baseline | stretch; defines the alignment of the project on the cross axis (applicable to [elastic box] elements of the parent container)

Align-items:flex-start

Align-items:flex-end

Align-items:center

Align-items:baseline

Align-items:stretch

V. Media inquiries

1. What is media inquiry?

Using the @ media query, you can define different styles for different media types.

@ media can set different styles for different screen sizes, especially if you need to set up a responsive page, @ media is very useful.

When you resize the browser, the page will also re-render the page according to the width and height of the browser.

two。 The role of media inquiry

The display effect can be customized for some specific output devices without changing the content of the page, which is the main way to realize the responsive layout.

3. The syntax of media query

V Outreach css syntax:

Media type: mediatype

Keyword: and | not | only

Media Features: media feature

Example:

V syntax for embedded styles:

@ media mediatype and | not | only (media feature) {.}

Media type: mediatype

Keyword: and | not | only

Media Features: media feature

@ media screen and (max-width: 960px) {

Body

{

@ media screen and (max- (min-width:960px) and (max-width:1200px) {

Body {

Background:yellow

}

IV. Classroom cases

Here is a simple example of a responsive layout

Navigation section:

1) the navigation part consists of three parts: logo, navigation and login. These three parts are placed in a parent container of header. Set display:flex; to header to make it an elastic box model, and set the principal axis direction to row. The alignment of child elements in the parent container is aligned at both ends.

2) hide the navigation and add media query when the window is less than or equal to 640px

Picture list section

1) all images are placed in a parent container named picture in class. Add display:flex; to the parent container to make it an elastic box model, set the alignment of child elements to center alignment (justify-content:center;), and set each child element to occupy 25% of the parent element.

2) add media query. When the window is smaller than 640px, two pictures are placed in each row, that is, each child element occupies 50%.

This is the end of the article on "HTML5+CSS3 basic responsive page layout example analysis". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "HTML5+CSS3 basic responsive page layout example analysis". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.