Responsive layout and mobile web development Introduction to responsive layout Concepts Ethan Marcotte (Ethan Marcotte) proposed the term Responsive Web Design (RWD, Responsive Web Design) in 2010. In one of his articles "Responsive Web Design · An A List Apart Article", he integrated the three existing development techniques (flexible images, flexible grid layout, media and media queries) and named it responsive Web Design. So what is truly responsive design? Marcot said that the true responsive design method is not only to change the web page layout according to the size of the visible area, but to subvert the current web design method as a whole. It is a kind of perfect layout for the web content of any device. Display mechanism. Three Elements of Responsive Layout Flexible Picture Flexible picture is also called responsive picture, which means that the picture can change with the change of the parent container, and the width is limited by the parent container and cannot be displayed in the original size of the picture. Implementation method 1. Set the width of the picture to max-width: 100% 2. If a high-definition picture is provided, additional processing is required to load different pictures according to different device sizes. Need to adopt the form of media query to realize Media query Media query media already exists in css2, and media attributes and usage scenarios are added to css3. Disadvantage: Disadvantages of media query: The development plan of media query is not suitable for overly complex web pages. . Media type screen tty tv projection The only widely used media types for handheld print braille aural all tip are screen and all.
Media attributes Media attributes are new content of CSS3. Most media attributes are prefixed with "min-" and "max-" to express "less than or equal to" and "greater than or equal to". This avoids the use of "<" and ">" characters that conflict with HTML and XML. Note: Media attributes must be wrapped in brackets (), otherwise it will not contain width | min-width | max-width height | min-height | max- height device-width | min-device-width | max-device-width device-height | min-device-height | max-device-height aspect-ratio | min-aspect-ratio | max-aspect-ratio device-aspect- ratio | min-device-aspect-ratio | max-device-aspect-ratio color | min-color | max-color color-index | min-color-index | max-color-index monochrome | min-monochrome | max-monochrome resolution | min-resolution | max-resolution scan | grid logical operator not and or only, breakpoints, we use the form of media query to layout the web page, the principle is to set several interval ranges, when the width of the browser meets the conditional interval Then execute the corresponding css code. The setting of breakpoints can be based on the actual situation or refer to the settings of some frameworks. The breakpoint of the bootstrap frame <768px ultra-small screen (generally refers to mobile phones) >= 768px and <= 992px small screen (generally refers to tablets) >= 992px and <= 1200px medium screen (desktop monitor)> = 1200px large screen (larger desktop display) flexible layout mobile web development pixel pixel, also known as pixel, is the basic unit of image display, translated from the English "pixel", pix is the common abbreviation of the English word picture, plus English The word "element" means pixel, so "pixel" means "picture element" and is sometimes called pel (picture element). Pixel is the basis of web page layout. A pixel is the smallest area that a computer can display a specific color. When the size of the device is the same but the pixels become denser, the transition of the screen that can be displayed is more detailed, and the website looks brighter. Classified device pixel device pixel (device independent pixels): the physical pixels of the device screen, the number of physical pixels of any device is fixed CSS pixels CSS pixels (CSS pixels): also known as logical pixels, created for web developers , An abstract layer used in CSS and javascript Viewport (viewport) Classified layout viewport The area rendered in the mobile browser of the viewport webpage, used to load the content of the webpage. The visual viewport of the browser’s window. The ideal viewport allows The layout viewport is equal to the visual viewport, that is, the ideal viewport, proposed by Jobs, for example: The layout viewport is equivalent to the content of the web page, and the screen on the mobile terminal is equivalent to the visual viewport. When we set the layout viewport to be the same as the visual viewport, it becomes an ideal viewport. Also known as logical pixels, it is created for web developers. It is an abstract layer used in CSS and javascript. Viewport classification layout. The viewport web page is rendered in the mobile browser. It is used to load web pages. Content visual viewport The ideal viewport of the browser window makes the layout viewport equal to the visual viewport, that is, the ideal viewport, which is proposed by Jobs. For example: The layout viewport is equivalent to the content of a web page, and the screen on the mobile terminal is equivalent to the content of a webpage. Viewport. When we set the layout viewport to be the same as the visual viewport, it becomes an ideal viewport. Also known as logical pixels, it is created for web developers. It is an abstract layer used in CSS and javascript. Viewport classification layout. The viewport web page is rendered in the mobile browser. It is used to load web pages. Content visual viewport The ideal viewport of the browser window makes the layout viewport equal to the visual viewport, that is, the ideal viewport, which is proposed by Jobs. For example: The layout viewport is equivalent to the content of a web page, and the screen on the mobile terminal is equivalent to the content of a webpage. Viewport. When we set the layout viewport to be the same as the visual viewport, it becomes an ideal viewport.
The so-called ideal viewport is the optimal size of the layout viewport on a device, and the page under the ideal viewport is easy for browsers to browse and read. Scaling On the desktop side, 1 pixel of CSS often corresponds to 1 physical pixel of the computer screen. On the mobile phone side, due to the limitation of the screen size, zooming is a frequent operation. Regardless of whether we are zooming in or out, the CSS pixels set by the element (such as width: 300px) are always the same, and how many device pixels a CSS pixel corresponds to is determined by the current zoom ratio. The DPR device pixel ratio DPR (devicePixelRatio ) Is the ratio of device pixels to CSS pixels DPR = device pixels/CSS pixels (in a certain direction) when the default zoom is 100%. In earlier mobile devices, there was no concept of DPR. With the development of technology, the screen pixel density of mobile devices is getting higher and higher. Starting from iphone4, Apple introduced the so-called retina retina screen. It is called a retina screen because the PPI (screen pixel density) of the screen is too high, and the human retina cannot distinguish the pixels on the screen. The resolution of iphone4 has doubled, but the screen size has not changed. This means that the pixels on the same size screen have doubled, so DPR = 2 Taking iphone5 as an example, the CSS pixel of iphone5 is 320px568px, and DPR is 2. , So the device pixel is 640px1136px ppi ppi refers to the number of pixels that can be displayed per inch on the screen, that is, the screen pixel density . The setting of the meta tag for the mobile terminal layout