There are several methods for responsive layout

Some methods of responsive layout include: 1. Media query; 2. Percentage [%]; 3. vw or vh, vw represents the width relative to the view window, and vh represents the height relative to the view window; 4. , the rem unit is relative to the font size of the html element; 5. Flex elastic layout.

The operating environment of this article: Acer S40-51, Windows10 Home Chinese version

Recommended: css video tutorial

Some methods of responsive layout are:

Responsive layout method one: media query

Using @media media queries can define different styles for different media types. Especially for responsive pages, multiple sets of styles can be written for different screen sizes to achieve an adaptive effect. For example:

Through media queries, responsive layout can be achieved by writing different styles for devices with different resolutions. For example, we can set different background images for screens with different resolutions. For example, setting @2x images for small-screen mobile phones and @3x images for large-screen mobile phones can be easily achieved through media queries.

But the shortcomings of media queries are also obvious. If too many styles need to be changed when the browser size changes, multiple sets of style codes will be very cumbersome.

Responsive layout method two: percentage%

For example, when the width or height of the browser changes, the percentage unit can be used to make the browser The width and height of the component change as the browser changes, thereby achieving a responsive effect.

The percentage of height and width attributes depends on the width and height of the parent tag. However, the situation with padding, border, margin and other attributes is different.

• If the padding of a child element is set as a percentage, whether it is vertical or horizontal, it will be relative to the direct parent element. width, regardless of the height of the parent element.

• If the margin of a child element is set to a percentage, whether it is vertical or horizontal, it will be relative to the width of the direct parent element

• border-radiusDifferent, if border-radius is set to a percentage, it is relative to its own width

Disadvantages

It is difficult to calculate, if we To define the width and height of an element, according to the design draft, they must be converted into percentage units.

If you use percentages in each attribute, the attributes relative to the parent element are not unique. For example, width and height are relative to the width and height of the parent element, while margin and padding are relative to the width of the parent element, whether vertically or horizontally, border-radius is relative to the element itself, etc., which makes it easy for us to use percentage units to make layout The problem becomes complicated.

So, it is not recommended to use % for responsive layout.

Responsive layout method three: vw/vh

A new unit vw/vh is introduced in css3, which is related to the view window. vw means relative to the view window. The width, vh represents relative to the view window height. For any hierarchical element, when using vw units, 1vw is equal to one percent of the view width.

Very similar to percentage layout, but easier to use.

Responsive layout method four: rem

The rem unit is the html element relative to the font size, also called the root element. By default, the font-size of html elements is 16px. So at this time 1rem = 16px.

Optimized version

//动态为根元素设置字体大小
function init () {
 // 获取屏幕宽度
 var width = document.documentElement.clientWidth
 // 设置根元素字体大小。此时为宽的10等分
 document.documentElement.style.fontSize = width / 10 + 'px'
}
//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

Understanding: The above code is implemented. No matter how the device's visual window changes, rem is always set to 1/10 of width. That is, the percentage layout is achieved. It's not as rigid as the first version of the media query.

The above code needs to be written before the dom (can be placed in the first script tag in the head)

Responsive layout method five: flex elastic layout

Elastic layout is a very convenient way to implement responsive layout that only relies on CSS styles. It is also the most commonly used method to implement responsiveness.

Especially now, the pages of e-commerce websites or mobile apps such as Taobao and Taobao can be easily implemented using flexible layout.

Flexible layout has corresponding attributes on the parent and child elements to regulate the "elasticity" of the child elements in the parent element.

• On the parent element, the properties related to flexible layout that we often use mainly include flex-direction, flex-wrap, justify-content, align-items, align-content, These attributes regulate the flexibility of the item in the parent element from the direction of the main axis, whether to wrap, the alignment of the item on the main axis, the alignment of the item on the cross axis, and the alignment of the item on multiple axes.

• On child elements, the properties related to flexible layout that we often use mainly include order, flex-grow, flex-shrink, flex-basis, and align-self. Each attribute regulates the flexibility of the project itself from the sorting of the project, the project enlargement ratio, the project reduction ratio, the main axis space occupied by the project, and the alignment of a single project on the cross axis.

If you want to learn more about programming, please pay attention to the php training column!

The above is the detailed content of There are several methods for responsive layout. For more information, please follow other related articles on the PHP Chinese website!