What does html5 responsive design mean?

html5 Responsive design means using percentage layout to create a fluid and flexible interface, and using media queries to limit the changing range of elements; the concept of responsive design is based on fluid layout, elastic pictures, elastic tables, elastic A combination of technologies such as video and media queries.

The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.

html5 What does responsive design mean

What is responsive:

The responsive design concept is based on fluid layout, flexible pictures, and flexible tables , a combination of technologies such as elastic video and media queries. Using percentage layout to create a fluid and flexible interface, and using media queries to limit the changing range of elements, the combination of the two forms the core of responsive design.

What is viewport:

Viewport is a very important concept in responsive design. The concept of viewport is divided into two types of viewports for mobile browsers, one is the visible viewport, which is the size of the device, and the other is the window viewport, which is the width of the web page.

tag

In HTML5, the tag can be used to configure viewport properties

Basic syntax:

  <meta name="viewport" content="uesr-scalable=no, width=device-width,initial-scale=1.0,maximum-scale=1.0">

Attribute Explanation:

uesr-scalable=no: used to set whether the user can zoom, the default value is yes

width=device-width: used to set the width of the window viewport, here means the same as The visible viewport width is the same

initial-scale=1.0: used to set the initial zoom ratio, the value is 0·10.0

maximum-scale=1.0: used to set the minimum zoom ratio, taken The value is 0·10.0

height: used to set the width of the window viewport

minimum-scale: used to set the minimum zoom ratio

Media query

In the CSS3 specification, media queries can change the display mode of the page based on differences in viewport width, device orientation, etc. Media queries consist of media types and conditional expressions.

The sample code is as follows:

@media screen and(max-width:960px){
               /*样式设置：表示媒体类型screen并且屏幕宽度小于等于960px时的样式*/
  }

Percent layout:

Fixed layout (in pixels) can be converted to percentage width to achieve Percent layout:

The conversion formula is: target element width/parent box width = percentage width

(Learning video sharing: css video tutorial, html video tutorial )

The above is the detailed content of What does html5 responsive design mean?. For more information, please follow other related articles on the PHP Chinese website!