Responsive layout: web page layout adapted to different devices

introduce

        Layout of web pages that provides good user experience on different devices and screen sizes is one of the important considerations in modern web development. Responsive layout is a flexible approach to layout that enables web pages to automatically adapt to a variety of devices, including desktops, tablets, and mobile devices. This tutorial will show you how to implement a responsive layout.

---

CSS media queries

With CSS media queries, we can apply different styles based on device characteristics such as screen width, height, and screen orientation. Media queries are an important tool for implementing responsive layouts.

basic grammar

Media queries use @mediarules and specify one or more conditions within parentheses. If the condition is met, the CSS rules in the media query will be applied. Following is the basic media query syntax:

@media mediatype and (condition) {
  /* 在此处定义适应特定条件的样式 */
}

• mediatype: Optional, specify the applicable media type (such as all, screen, print, etc.), the default is all.
• condition: Required, defines one or more conditions to match the device's characteristics.

common conditions

In media queries, we can use various conditions to accommodate different devices and screen sizes. Here are some common conditions:

• width: the width of the device
• height: the height of the device
• device-width: the width of the device screen
• device-height: the height of the device screen
• orientation: the orientation of the device &