Complete high-frequency question bank warehouse address: github.com/hzfe/awesom…

The full frequency question bank reading address: febook.hzfe.org/

Issues related to

  • This section describes the viewport value of the meta
  • What are the values of REM and vw calculated from
  • 1px shows the problem
  • How to fit bangs

Answer key points

Viewport queries responsive images relative to unit media

The main pain point of mobile terminal development is how to adapt the page to different terminal devices, so that different terminal devices have basically the same visual effect and interactive experience. Common adaptation schemes for mobile terminals are as follows. They are usually used together. Include:

  • The viewport information is configured
  • Responsive layout
  • Relative unit
  • Media queries
  • Responsive picture
  • Safety zone adaptation

Knowledge depth

1. Related concepts

1.1 pixels

Resolution

Resolution is the degree of detail in a bitmap image, measured in pixels per inch (PPI). The more pixels per inch, the higher the resolution.

Physical Pixels

Physical pixels are the actual number of pixels on a device.

Logical Pixels

Is an abstract concept. On different devices, a logical pixel represents different number of physical pixels. CSS pixels are logical pixels.

Logical pixels are used to describe a physical unit of the same size in order to produce a consistent visual effect across devices of different sizes and density ratios. On a screen with a high density ratio, one logical pixel corresponds to multiple physical pixels.

Device Pixel Ratio

Ratio of the physical pixel resolution of the current display device to the CSS pixel resolution.

Related issues: Blurred images or 1px borders

On mobile, common images or 1px borders appear blurred/thick on some models. Based on the concept of pixel, we know that 1px in CSS refers to one logical pixel. A logical pixel mapped to a device with different pixel density ratios actually corresponds to different physical pixels.

Therefore, an image of the same size on a device with a high density ratio will look blurry compared to a device with a low density ratio because a bitmap pixel needs to be applied to multiple physical pixels.

1.2 viewport

ViewPort

Viewports generally refer to the current viewable area of the page when the user visits it. The viewport displays the rest of the page by scrolling. On the PC side, the width of the < HTML > element, when set to 100%, is equal to the viewport size, which is equal to the browser window size. Through the document. The documentElement. ClientWidth or Windows. The innerWidth viewport width can be gained. CSS layouts are calculated based on viewport size.

Due to the small size of mobile devices, if the viewport layout based on the size of the browser window, some sites that have not been adapted to mobile device style layout disorder, poor user experience. The concept of layout viewports and visual viewports is introduced to enable mobile terminals to display unadapted pages.

Layout ViewPort

The default width of the layout viewport is 980px, which is generally wider than the physical screen. CSS layouts are computed based on layout viewports. Browsers on mobile devices render web pages based on virtual layout viewports and shrink the resulting rendering to fit the actual width of the device, thus displaying the full content of the site without breaking the layout structure.

Visual ViewPort

The visual viewport is the currently visible part of the layout viewport. Users can zoom to view page content, changing the visual viewport without affecting the layout viewport.

2. Configure the viewport using the viewPort meta label

Developers can set the mobile layout viewport with
. If the viewPort meta tag is not set, it may result in the smaller width of the media query set by the developer never being used, because the default layout viewport width is 980px.

<! The width property controls the viewport size. Device-width specifies the screen width of the device. -->
<! The initial-scale property controls the level of scaling when the page is first loaded. -->
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
Copy the code

3. Use modern responsive layout schemes

In addition to floating and percentage layouts, flexible Grid layouts using Flexbox or CSS Grid are now common. You can choose a layout scheme according to the following conditions:

  1. Do you need a one-dimensional or two-dimensional layout: Flexbox is laid out in a single spindle direction. The CSS Grid can be divided into rows and columns for layout. Use Flexbox if you only need to layout by row or column; If you need to control the layout by row and column, use a CSS Grid.

  2. Focus on layout structure or Content Flow: Flexbox focuses on content flow. The width or height of a Flex Item is determined by the contents of the Item. Flex items grow and shrink based on their internal contents and available space. CSS Grid focuses on precise rules for the structure of content layout. Each Grid Item is a Grid cell arranged along horizontal and vertical axes. Use Flexbox if you allow flexible space allocation for content; Use CSS Grid if you need to control exactly where items are placed in your layout.

4. Use Media Queries

Media queries allow developers to style as needed based on device type and characteristics, such as screen resolution or browser viewport width.

/* When the browser width is at least 600px and above */
@media screen and (min-width: 600px) {
  .hzfe {
    /* Apply some styles to.hzfe */}}/* Style when device DPR is 2 */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-1 {
    border-width: 0.5 px.; }}Copy the code

5. Use relative units

Mobile development needs to face very complex terminal device size. In addition to reactive layouts, media queries, and so on, relative units are generally used to gain more flexibility when laying out elements.

rem

According to the W3C specification, 1rem is the font size of the root HTML element.

Due to the poor compatibility of VW and VH in the early stage, flexible, a widely used mobile end adaptation scheme, uses REM to simulate VW characteristics to achieve mobile end adaptation. In design and development, it is common to agree on a certain size as the development benchmark. Developers can use tools such as Px2REM to automatically convert absolute px units to other REM units, and then use flexible scripts to dynamically set HTML font sizes and
.

vw/vh

As VW and VH units are now supported by more browsers, they can be used directly for mobile development.

Similarly with flexible solution, using VW and VH also requires the size conversion in the design draft and the conversion of PX to VW value. Common tools such as PostCSS-Px-to-viewport can meet the requirements.

6. Use responsive images

When displaying images, you can define zero or more source elements and an IMG element in the Picture element to provide alternative versions of the image for different display/device scenarios. In this way, the picture content can flexibly respond to different devices, avoiding the problem of blurred pictures or poor visual effects and wasting bandwidth by using too large pictures.

The source element can be configured with properties such as SRcset, Media, sizes, etc., so that user agents can configure image resources for devices with different media search ranges or pixel density ratios. If no matching image is found or the browser does not support the picture element, the IMG element is used as a fallback scheme.

<picture>
  <source
    srcset="hzfe-avatar-desktop.png, hzfe-avatar-desktop-2x.png 2x"
    media="(min-width: 990px)"
  />
  <source
    srcset="hzfe-avatar-tablet.png, hzfe-avatar-tablet-2x.png 2x"
    media="(min-width: 750px)"
  />
  <source
    srcset="hzfe-avatar-mobile.png, hzfe-avatar-mobile-2x.png 2x"
    media="(min-width: 375px)"
  />
  <img
    srcset="hzfe-avatar.png, hzfe-avatar-2x.png 2x"
    src="hzfe-avatar.png"
    alt="hzfe-default-avatar"
  />
</picture>
Copy the code

7. Adapt to safe areas

There are corners, bangs and Home indicators, which vary from manufacturer to manufacturer. To ensure that the display effect of the page is not obscured by these features, you need to restrict the page within the security zone.

<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
Copy the code

After setting viewport-fit=cover, apply the padding on the elements as required with the following preset environment variables to ensure that they are not covered by some of the above features:

  • safe-area-inset-left
  • safe-area-inset-right
  • safe-area-inset-top
  • safe-area-inset-bottom
/* Example: compatible with bangs */
body {
  /* Constant function compatible with iOS 11.2 and below */
  padding-top: constant(safe-area-inset-top);
  /* env is compatible with iOS 11.2 */
  padding-top: env(safe-area-inset-top);
}
Copy the code

The resources

  1. iOSRes
  2. Viewport concepts
  3. A tale of two viewports
  4. Responsive Design
  5. Relationship of grid layout to other layout methods
  6. Designing Websites for iPhone X