CSS Advanced - Mobile responsive layout tips

1. Device pixel, device independent pixel, CSS pixel, PPI, and devicePixelRatio

1.1 Device Pixel (physical pixel/pixel resolution)

The smallest physical unit of a display (fixed for a display)
Take the mobile phone screen as an example. The pixel resolution of iPhone is 1125×2436, which means that the screen can display 1125 physical pixels horizontally and 2436 vertically
A 4K display is usually referred to as 4096×2160

1.2 Device Independent Pixels (DIPS)

For example, when we say “the computer screen is not suitable for playing games at 2560×1600 resolution, let’s set it to 1440×900”, the resolution here refers to device-specific pixels
Available at the consolewindow.screen.width/window.screen.heightTo view
The iPhone X’s logical resolution of 375×812 is the device’s individual pixels
A device’s individual pixels may contain multiple physical pixels, and the more they contain, the clearer the display

CSS 1.3 pixel

1px CSS pixel === 1 device independent pixel without scaling the page
When the page is enlarged by 200%, the device independent pixels of the page remain the same. CSS pixels are enlarged. But now the relationship between CSS pixels and device independent pixels has changed, 1px === 4 individual pixels (width x2, height X2)

1.4 PPI

Number of physical pixels per inch
Take the 5.8-inch (diagonal screen length) iPhone X with 1125×2436 resolution:
ppi = Math.sqrt(11251125 + 24362436) / 5.8, a value of 463ppi

1.5 devicePixelRatio

Pixel thanwindow.devicePixelRatio
devicePixelRatioRefers to the ratio of physical pixels to device-independent pixels, i.e. the number of physical pixels rendered by 1 independent pixel
Device. Pixel Ratio (DPR) : device pixel ratio, device pixel/device-independent pixel, which represents the conversion relationship between device-independent pixels and device pixelswindow.devicePixelRatioTo obtain
window.devicePixelRatio= Physical pixels/device-independent pixels
The iPhone XdevicePixelRatioIs 3

1.6 HIGH definition picture distortion

Some pictures with low pixels can be displayed on the normal display screen, but they will appear blurred on the HD screen
The reason: if an image is set to 100px width and height, it will display 100 device-independent pixels on different screens, but 100 device-independent pixels on an HD screen will require a lot more physical pixels than a normal screen
The more physical pixels a device’s independent pixels contain, the clearer the display will be. If 100 device independent pixels need 1W physical pixels on a normal screen, 3W on a HIGH-DEFINITION screen. However, the image itself may contain far less than 3W pixels. In this case, the image will stretch its pixels so that it looks blurry
Solution: Make the width and height of images smaller on a HIGH-DEFINITION screen, so they don’t need as many physical pixels. The closer the physical pixels needed to display images on a screen, the sharper they are

1.7 Vector drawing is never distorted

Because vector graphics are not displayed in pixels, they areDrawn from a given coordinate data, so no distortion

2. Layout ViewPort and Visual ViewPort

Layout ViewPort
Visual ViewPort and physical pixels
Ideal Viewport and DIP device independent pixels

3. Viewport zoom adaptation

Screen size:Window.screen.width // device independent pixels
Browser window size:Window. innerWidth, window.innerHeight // CSS pixels

InnerWidth/innerHeight do not include the width/height of the scroll bar, precise calculation with the document. The documentElement. ClientWidth and document documentElement. ClientHeight

<! -- meta:vp tab --> 
<meta id="viewport" name="viewport" content="width=device-width; The init ial - scale = 1.0; Maximum - scale = 1.0; user-scalable=no;">
Copy the code

A viewport is the area of the screen in which the browser displays the content of the page:

widthControl:viewportYou can specify a value such as 600 or a special value such asdevice-widthIs the width of the device (in CSS pixels scaled to 100%)
heightAnd:widthThe corresponding height is specified
initial-scale: Initial zoom, when the page is first scaledloadWhen scaling
maximum-scale: allows the user to zoom to the maximum scale
minimum-scale: allows the user to zoom to a minimum scale
user-scalabel: Indicates whether the user can manually zoom in and out

4. Media Query @media

Syntax: @media Media type logic operator (media properties) {style code}

4.1 Logical operators

andThe: operator is used to combine multiple media attributes into the same media query. The result of this query is true only if each attribute is true;@media all and (min-width: 700px) and (orientation: lanscape) {... }
notThe: operator inverts the structure of a media query.@media not all and (monochrome) {... }
onlyThe: operator means that the specified style is applied only if the media query matches. It can be used to prevent the selected style from being applied in older browsers.@media only screen and (max-width: 1000px) {... }

4.2 Media Properties

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

4.3 the relation screen

@media (orientation: Portrait) {portrait}
@ Media (Orientation: landscape) {landscape}

5. Vw elastic fit

vw:1vwEqual to 1% of the viewport width
vh:1vhEqual to 1% of the viewport height
vminSelection:vwandvhThe smallest of the two
vmaxSelection:vwandvhThe biggest one in the
Viewport units are different from % units. Viewport units are defined according to the percentage of viewport size depending on the size of the viewport. The % unit is dependent on the element’s ancestor

6. Dynamic REM adaptation

Unit of relative length, relative to the root element (HTML element)font-sizeCompute multiples of values
The root element is the HTML defaultfont-sizefor16px
For ease of calculation, we usually set the font size of the parent element to100px
Rem && VW computing tools for mobile: www.jq22.com/demo/jquery…

  // Design draft for 750
  function refreshRem() {
      var desW = 750,
          winW = document.documentElement.clientWidth,
          ratio = winW / desW;
      document.documentElement.style.fontSize = ratio * 100 + 'px';
  }
  refreshRem();
  window.addEventListener('resize', refreshRem);
Copy the code

7. Flexible Flex fit

Flex, short for Flexible Box, stands for “Flexible layout” and is used to provide maximum flexibility for boxed models.

7.1 Basic Concepts of Flex layout

Elements with a Flex layout are called Flex containers, or containers for short. All of its child elements are automatically called container members and are called Flex items, or “items.”

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.

7.2 Container Properties

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

7.2.1 flex – direction

Set the spindle orientation

row: The direction of the main axis is horizontal, from left to right
columnThe direction of the main axis is vertical, from top to bottom
row-reverse: The direction of the main axis is horizontal, from right to left
column-reverseThe direction of the main axis is vertical, from bottom to top

7.2.2 flex – wrap

wrap: a newline
nowrap: No line breaks (default)
wrap-reverse: Newline, but the first line is at the bottom

7.2.3 flex – flow

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap

7.2.4 the justify – content

Property defines the alignment of items on the main axis

7.2.5 align – items

The align-items property defines how items are aligned on the cross axis

The align – items: flex – start | flex – end | center | baseline | stretch

“Stretch” (default) : If the height of the project is not set or is set to “auto”, it will occupy the entire height of the container.

7.2.6 align – content

The align-content property defines the alignment of multiple axes. This property does not work if the item has only one axis.

7.3 Project Attributes

The following six properties are set on the project:

order
flex-grow
flex-shrink
flex-basis
flex
align-self

7.3.1 the order

Property defines the order in which items are sorted, with the smaller the value, the higher the order. Default is 0

7.3.2 flex – turns up

flex-growProperty defines the zoom scale of the project, which defaults to 0. That is, if there is spare space, do not enlarge.
If all the projectsflex-growProperties are all 1, so they divide the remaining space equally.
If a project getsflex-growProperty is 2 and all other items are 1, the former takes up twice as much free space as the other items.

.item {
	flex-grow: <number>; /** default 0 */
}
Copy the code

7.3.3 flex – the shrink

flex-shrinkProperty defines the scale by which the project should shrink. The default is 1, that is, the project will shrink if there is not enough space
If all the projectsflex-shrinkAttributes are 1, when the space is insufficient, soya-bean milk and other proportional reduction
If a project offlex-shrinkProperty is 0, all other items are 1, the former does not shrink when space is insufficient
Negative values have no effect on this property

.item {
	flex-shrink: <number>; /** default 1 */
}
Copy the code

Sections 7.3.4 flex – basis

The Flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, which is the original size of the project. It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space

.item {
	flex-basis: <length> | auto; /** default auto */
}
Copy the code

7.3.5 flex

flexAttributes areflex-grow.flex-shrinkandflex-basisShort for, the default value is0 1 auto. The last two attributes are optional
flex: 0 1 auto;The default value
flex: none;Stand for means equal toflex: 0 0 auto;
flex: auto;The word stands forflex: 1 1 auto;
flex: number;When flex is a non-negative number, the number isflex-growThe value of theflex-shrinkIs 1,flex-basisThe value of 0%

7.3.6 align – self

The align-self attribute allows a single item to be aligned differently from other items, overriding the align-items attribute. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch

.item {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Copy the code

8. Various solutions to 1PX problem on mobile terminal

CSS lines with 1px pixels may have different physical pixels, either 2 physical pixels or 3 physical pixels, but the designer wants a line with 1 physical pixel, and the designer wants the actual 1px border to look like this:

For CSS, think of it as border: 0.5px; This is the smallest unit that can be displayed on multiple screens. However, not all mobile browsers recognize border: 0.5px. In some systems, 0.5px is treated as 0px. How about 1px?

8.1 Implementation using border-image

Prepare a suitable border image with the following styles:

.border-bottom-1px {
  border-width: 0 0 1px 0;
  -webkit-border-image: url(linenew.png) 0 0 2 0 stretch;
  border-image: url(linenew.png) 0 0 2 0 stretch;
}
Copy the code

Above, the border is set at the bottom of the border, so the image is 2px high, the top 1px color is transparent, and the bottom 1px color is the visual border color.

Advantages: Single or multiple borders can be set;

Disadvantages: change color and style trouble, need to replace the picture;

8.2 Background-image is used

Background-image is the same as border-image. You need to prepare an image that meets your requirements. The border is then simulated on the background.

.background-image-1px {
  background: url(../img/line.png) repeat-x left bottom;
  -webkit-background-size: 100% 1px;
  background-size: 100% 1px;
}
Copy the code

The advantages and disadvantages are the same as those of border-image.

8.3 Multi-background gradient implementation

It is similar to background-image, except that the image is replaced with a CSS3 gradient. Set the gradient background to 1px, with 50% color and 50% transparency.

.background-gradient-1px {
  background:
    linear-gradient(# 000.# 000 100%, transparent 100%) left / 1px 100% no-repeat,
    linear-gradient(# 000.# 000 100%, transparent 100%) right / 1px 100% no-repeat,
    linear-gradient(# 000.# 000 100%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(# 000.# 000 100%, transparent 100%) bottom / 100% 1px no-repeat
}
/ * or * /
.background-gradient-1px{
  background:
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0.# 000), to(# 000)) left / 1px 100% no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0.# 000), to(# 000)) right / 1px 100% no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0.# 000), to(# 000)) top / 100% 1px no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0.# 000), to(# 000)) bottom / 100% 1px no-repeat
}
Copy the code

Advantages: can achieve single, multiple borders; The border color is optional;

Disadvantages: increase the amount of code, rounded corners can not be realized, compatibility problems;

8.4 Use box-shadow to simulate borders

Use the shadow treatment to achieve a 0.5px effect

.box-shadow-1px {
  box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
Copy the code

Advantages: less code, good compatibility;

Disadvantages: Border has shadow, color becomes lighter;

8.5 Pseudo-element + Transform

Create a pseudo-element border 1px and scale it to 50% by transform

Remove the border of the original element and redo the border using :before or :after and reduce the scale of the transform by half. The original element is positioned relative to the original element and the new border is positioned absolutely.

/ / a singleborderThe style is set.scale-1px{
  position: relative;
  border:none;
}
.scale-1px:after{
  content: ' ';
  position: absolute;
  bottom: 0;
  background: # 000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
Copy the code

// Four boder style Settings.scale-1px{
  position: relative;
  margin-bottom: 20px;
  border:none;
}
.scale-1px:after{
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid # 000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
Copy the code

Advantages: Can meet all scenarios, and flexible modification;

Disadvantages: Multiple layers of nesting for elements that already use pseudo-classes (such as Clearfix);

8.6 Viewport + REM implementation

By setting the rem reference value of the corresponding viewport, this method can write 1px as easily as before.

When devicePixelRatio = 2, output viewPort:

<meta name="viewport" content="Initial - scale = 0.5, the maximum - scale = 0.5, the minimum - scale = 0.5, user - scalable = no">
Copy the code

With devicePixelRatio = 3, output viewPort:

<meta name="viewport" content="Initial - scale = 0.3333333333333333, the maximum - scale = 0.3333333333333333, the minimum - scale = 0.3333333333333333, user - scalable = no">
Copy the code

Advantages: All scenarios can be satisfied, one set of code can be compatible with almost all layouts;

Disadvantages: old project modification costs too much, only suitable for the new project;

9. Various solutions to the problem of picture blurring

Under different device pixel ratios, load images with different resolutions, that is, load multiples of images.

9.1 media query

Use media query to judge the pixel ratio of different devices to display pictures with different precision:

.avatar{
    background-image: url(conardLi_1x.png);
}        
@media only screen and (-webkit-min-device-pixel-ratio:2) {.avatar{
          background-image: url(conardLi_2x.png); }}@media only screen and (-webkit-min-device-pixel-ratio:3) {.avatar{
          background-image: url(conardLi_3x.png); }}Copy the code

This scheme only applies to background images

9.2 the image – set

.avatar {
    background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png" 2x);
}
Copy the code