What is css responsive layout

Cause As more and more smart mobile devices (mobile, tablet devices) join the Internet, the mobile Internet is no longer an independent small network, but has become an important component of the Internet. part. The emergence of responsive web design (RWD/AWD) aims to provide a better experience for mobile devices and integrate various screen sizes and resolutions from desktop to mobile phones, using technology to adapt web pages to small to large (now to Extra large) screens of different resolutions.
Note: Responsive Web Design = RWD, Adaptive Web Design = AWD, the same design below
RWD: Using CSS media query technology
Fluid layout (fluid grids)
Adaptive pictures/videos and other resource materials
(Some optimizations are made for small, medium and large screens, so that the screen space of any size can be fully utilized)
AWD : CSS media query technology (designed only for a limited number of preset screen sizes)
Use Javascript to operate HTML content
Manipulate HTML content on the server side (such as reducing content for mobile terminals, reducing content for desktop terminals Provide more content)
Design Ideas Mobile First (Start from the mobile terminal, RWD): Everything starts from the mobile terminal with the smallest screen (such as 320px for iPhone), first determine the content, and then proceed step by step Large screen design. Different from the original web design, which always starts from 1024px on the desktop computer.

The above is the detailed content of What is css responsive layout. For more information, please follow other related articles on the PHP Chinese website!