The layout of Web pages is influenced by various factors. The most important of these are screen size and screen resolution. Technically, screen size is the diagonal length of a screen and typically measured in inches. However, in terms of Web design, it may be more practical to think of it as the width and height of a screen.
The size of a screen affects how big the browser window can be opened and, therefore, the amount of information that can be displayed in any one instance. Screen sizes vary widely both between and within different classes of devices, the most common of which are desktops, tablets (e.g., iPad), and smart phones (e.g., iPhone). Whereas the screen size of iPhone is about 3.5 inches, that of a desktop monitor can be up to 30 inches or more. Also, even users using large screens commonly feel the need to change the size of the browser for convenience, just like they might change the orientation of their phone, for example, from portrait to landscape. This means that the sizes at which users view pages vary widely.
Screen resolution commonly refers to the number of dots (called pixels) in each dimension of a screen and is usually quoted in terms of width and height. A resolution of 1024 x 768 pixels, for example, means that the width of a screen contains 1024 pixels and the height 768. Another screen property that influences the display of a layout is pixels per inch (ppi), or pixel density, which is the number of pixels contained in each inch of a dimension. The higher the ppi, the smaller and sharper are the text and images displayed on the screen. This is how it is possible to display a reasonable amount of content in fine details on smaller screens. Interestingly, what is referred to as screen resolution is better described as pixel dimensions (previously introduced in Chapter 6). Rather, it is ppi that better describes screen resolution, as it is what indicates the level of detail a screen is capable of displaying. In any case, all the above properties vary widely in value both between and within different classes of computer devices, the most common of which are desktops, tablets, and smart phones. Table 21.1 shows an example of the variation in resolution and ppi in handheld (or mobile) devices as of time of writing.
What the variation in screen size and resolution means is that a Web page is likely to be viewed on a variety of screen sizes and resolutions, making it necessary to design pages in a way that makes them look as intended on as many screens as possible. In principle, a layout can be fixed, liquid, responsive, or adaptive in behavior. These descriptions essentially define how a page layout behaves when it is viewed in browser windows of different widths, and a layout can have a combination of the behaviors.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.