Responsive layout explained. How is it achieved? There are several ways to achieve this. 1. Native code implementation.

At present, when designing web pages in China, they are generally divided into two sets of pages, PC and mobile. However, under certain circumstances, it is necessary to design only one page and different ports can be used normally.

Therefore, an adaptive approach will be used.

The basic implementation using native code lies in the setting of mediaquery@media.

@media

Screen

You can query the size of the current browser, so you can use this method to set different CSS styles for the same page to meet different needs. resolution requirements.

2. Using bootstrap framework layout

The page with bootstrap framework layout has automatic corresponding adaptive effect.

But when writing, you must strictly follow the writing specifications of bootstrap, so that weird problems will not occur.

Writing example:

el-col:span=24>pclass=grid-contentbg-purple-dark>/p>/el-col>

/el-row>

2. Column spacing

Adjust the width between layouts through the :gutter attribute of the Row component

1

2

3

4

el-row:gutter=20>

el-col:span=6> pclass=grid-contentbg-purple>/p>/el-col>

el-col:span=6>pclass=grid-contentbg-purple>/p>/el-col>

/el-row>

3. Column drift

Adjust the offset position of the grid through the :offset property of the Col component (1 grid/24 grids at a time) ).

1

2

3

4

el-row:gutter=20>

el-col:span=6:offset=6>pclass=grid-contentbg-purple>/p>/el-col>

el-col:span=6:offset=6 >pclass=grid-contentbg-purple>/p>/el-col>

/el-row>

4. Alignment

Through Row component Type=flex starts the flex layout, and then adjusts the layout method through the justify attribute of the Row component. The attribute values ??are:

start in front (default)

center in the center

Space-between distribution adaptive (both sides_middle, no gaps on both sides)

around (middle_both sides, there will be gaps on both sides)

2

3

4

el-rowtype=flexclass=row-bgjustify=center>

el-col:span=6>pclass=grid-contentbg-purple>/p>/el-col>

el-col:span=6>pclass=grid-contentbg-purple- light>/p>/el-col>

/el-row>

5. Responsive layout

Refer to bootstrap’s responsiveness, default four size

xs768px

sm≥768px

md≥992

lg≥1200

1

2

3

4

5

6

el-row:gutter =10>

el-col:xs=8:sm=6:md=4:lg=3>pclass=grid-contentbg-purple>/p>/el-col>

el-col:xs=4:sm=6:md=8:lg=9>pclass=grid-contentbg-purple-light>/p>/el-col>

el- col:xs=4:sm=6:md=8:lg=9>pclass=grid-contentbg-purple>/p>/el-col>

el-col:xs=8:sm =6:md=4:lg=3>pclass=grid-contentbg-purple-light>/p>/el-col>

/el-row>

ICON icon

In the future, you can use i> to make icons and just add el-icon-iconName to its class.

The icon attribute can be added to button>.

What framework is used to develop front-end apps?

A front-end development framework is actually a collection of productized HTML/CSS/JavaScript components that we can use in design. There are many front-end development frameworks, and some of them are very well written. For everyone’s convenience, the following lists some of the most powerful and widely used front-end development frameworks.

Remember, these frameworks are not just things like CSS grids, they include entire front-end development frameworks.

Bootstrap

Boostrap is definitely the most popular and widely used framework at present. It is a beautiful, intuitive and powerful web design toolkit that can be used to develop cross-browser compatible and beautiful pages. It provides many popular UI components with simple styles, grid systems and some commonly used JavaScript plug-ins.

Bootstrap is written in the dynamic language LESS and mainly includes four parts:

Scaffolding - global style, responsive 12-column grid layout system. Remember that Bootstrap does not include responsive layout capabilities by default. Therefore, if your design requires responsive layout, you need to enable this feature manually.

Basic CSS - including basic HTML page elements, such as tables, forms, buttons, and images. Basic CSS provides elegance and consistency for these elements. of various styles.

Components - a collection of a large number of reusable components, such as dropdowns, button groups, navigation control - including: tabs, pills, lists tags, breadcrumb navigation (breadcrumbs) and page numbers (pagination), thumbnails (thumbnails), progress bars (progressbars), media objects (mediaobjects), etc.

JQuery+CSS3 realizes the special effect of falling leaves?

1. Responsive layout:

2. Mouse scrolling: commonly used mousewheel events, scrolling events 3. Animation effect: you can choose CSS3 animation, or write your own JS animation. In summary, the above Description: You need to control 1 through the events of 2, but the animation style (3) must be added to the style of 1. Done, chm is full of methods and methods. There are also ready-made effects

Basic layout in css?

The basic layout methods in CSS are as follows:

1. Static layout

The most traditional layout method, all sizes in the web page are composed of px As a unit, min-width is set. If the width is less than this width, a scroll bar will appear. If it is greater than this width, the content will be centered and the background will be added.

2. Adaptive layout

Can be seen as It is composed of multiple static layouts under different screens. Adaptive layout defines different layouts for different screen resolutions. Changing the screen resolution can switch between different static layouts (the positions of page elements may change), but in each static layout, the page elements do not change as the window size is adjusted.

The position of elements in the adaptive layout page will change, which is a good solution to the low utilization rate of large screen space in the fluid layout. When the screen resolution changes, the position of the elements on the page will change but the size will not.

3. Fluid layout (also known as percentage layout%)

The size of the main divided areas in the web page uses percentages (used with the min-* and max-* attributes), respectively. Set layout formats for different screens, and different layouts will appear when the screen size changes.

This means that on this screen, this element block is in this place, but on that screen, this element block will appear in that place. Only the layout changes, the elements remain unchanged. It can be seen as consisting of multiple static layouts under different screens.

4. Responsive layout: media query

Responsive design can make the website have a better browsing and reading experience on mobile phones and tablets. Different screen sizes result in different web page content being displayed to users. You can use media queries to detect the size of the screen (mainly detecting width), and set different CSS styles to achieve responsive layout. Mainly relies on css media queries.

There will be a layout style under each screen resolution, that is, the position and size of elements will change.

5. Flexible layout (rem/emflex layout)