A Media Enquiry

  1. Search through media
    • The way of media inquiry is the layout method adopted by Teacher Li Nanjiang early
    • It is mainly by querying the width of the device to execute different CSS code, and finally achieve the configuration of the interface
  2. Media Query advantages
    • Simple. What’s wrong with it
    • Adjust the screen width for responsive display without refreshing the page
    • This is especially useful when maintaining the same code for both mobile and PC
  3. Disadvantages of media search
    • Because the mobile terminal and PC terminal maintain the same set of code, so the number of code is relatively large, maintenance is not convenient
    • Trying to accommodate a large screen or HD device wastes resources on other devices, especially loading images
    • In order to give consideration to the responsive display effect of mobile terminal and PC terminal, it is inevitable to lose their unique interaction modes
  4. Application scenarios
    • For relatively simple (interface is not complex) web pages, such as: enterprise official website, leaflets and so on
    • We can implement responsive sites through media queries, scalable layouts, and Bootstrap
  • For more complex (interface complex) web pages, such as: e-commerce, group buying, etc., more is a set of code or PC terminal, mobile terminal a set of code

Page automatic jump + media query

  • Open on the PC Automatically open the PC page
  • Open on the mobile terminal Automatically open the mobile terminal interface

Automatic jump implementation steps

  1. The PC window is displayed by default
  2. Obtain the current browser information by using BOM on the PC
  3. Check whether the current browser is a mobile browser by using the re
  4. Jump to the mobile terminal interface through the LOCATION object of BOM
<! DOCTYPEhtml>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Common adaptation solution on mobile devices - Automatic interface jump</title>
	</head>
	<body>
		<script>
			/* PC: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36 Mobile: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1 Mobile: Mozilla / 5.0 (Linux; The Android 5.0. Sm-g900p Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Mobile Safari/537.36 */
			// let userAgentInfo = navigator.userAgent;
			// console.log(userAgentInfo);
			function isPc() {
			    let userAgentInfo = navigator.userAgent;
			    if(/iphone/i.test(userAgentInfo)){
			        return false;
			    }else if(/android/i.test(userAgentInfo)){
			        return false;
			    }
			    return true;
			}
			if(! isPc()){ location.href ="http://m.jd.com";
			}
		</script>
	</body>
</html>

Copy the code

Jump to mobile terminal combined with media query

  1. Query + REM through media

    • Although we put the mobile side in a single set of code, since the mobile side has a lot of screen size ==, it also needs to be adapted
    • For example,
      • iPhone3/4/5: 320px
      • iPhone6/7/8: 375px
      • iPhoneX/plus: 414px
    • Currently, in enterprise development, designers provide us with mobile terminal design pictures of ==750* XXX == or 1125* XXX
    • So we need to scale the images provided by the designer so that we can restore the design image 1:1

  2. How do I scale? (The following makes scaling easy to do)

    1. Figure out the size of each piece by dividing the design images into the specified number of pieces. For example: 750 divided the design images into 7.5 pieces (just to make it easier to calculate the size of each piece), then the size of each piece is 100px
    2. Divide the target screen into the specified number of slices and find the size of each slice. For example: 375 screens == also == 7.5 slices, then the size of each slice is 50px.
    3. Scale by design drawing, so there is original element size/original image size per copy = scale size/target screen size per copy => original element size/original image size per copy * target screen size per copy (not necessarily PX) = scale size For example: I have a 150*150 image on my design image, and I want to scale it to 375. 150/100 *50 = 1.5*50 = 75px

  3. How do you apply this formula to front-end development? (Using REM instead of PX)

    1. For example, in code 2.3, let’s set the root element size to 50px (HTML font size: 50px).

      We have picture 375 with 1.5rem on the screen

    2. To use it, just use “(original element size/original image size per copy) REM”

      • 150/100 = 1.5rem
      • 1rem = 50px, 1.5rem === 1.5*50 = 75px

  4. Large company application examples

    1. Netease news
      • 750/100 = 7.5
      • 375/7.5 = 50;
      • 320/7.5 = 42.7;
    2. Su Ningyi purchase
      • 750/50 = 15
      • 375/15 = 25
      • 320/15 = 21.33

As can be seen above: with REM, we only need to change the FONT size value of HTML according to different devices

Three page automatic jump + JS calculation (ok)

On the basis of scheme 2, change the media query to ==. Calculate the root size of each device with JS == (7.5 is the number of copies).

document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";

// Note that the innerWidth value is the CSS pixel of the mobile device.
Copy the code

JS computation vs media query

  • Calculates the root size dynamically through JS
    • Bonus: You don’t have to write a lot of media queries
    • Cons: Switching screen sizes requires a refresh
  • Set the root number through the media query
    • Benefits: No need to refresh the screen if you switch screen sizes
    • Cons: Write in as many sizes as you can@media screen and (min-width: 2px) @media screen and (min-width: 2px)

Four viewports zoom (== perfect ==)

Note :== == where the innerWidth value is the CSS pixel of the mobile device!! For CSS pixels and physical pixels are not one to one problem == == by scaling the PX value we operate is still physical pixels, so the original use of REM to achieve linear mapping can still achieve ==

  1. How to solve the problem that the pixel of the device is different from that of the CSS?

    • If the device pixel is the same as the CSS pixel, then no processing has any negative impact
    • If the device pixel is twice as large as the CSS pixel, we can reduce the CSS pixel size by half.
    • But sometimes the device pixels can be 3 /4 times the CSS pixels…

  2. Obtain Device Pixel Ratio (DPR)

    • DPR = Device pixel/CSS pixel

    • iPhone3GS : 320 / 320 = 1

    • iPhone4S: 640 / 320 = 2

    • iPhone678: 750 / 375 = 2

    • IPhoneX: 1125/375 = 3 In JS we can use window.devicepixelRatio to get the current device pixel

      console.log(window.devicePixelRatio);
Copy the code

  3. How to shrink? Use the initial-scale attribute
    to narrow down the viewport size

    <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Common adaptation scheme 4 for mobile terminals</title>
    <script>
        let scale = 1.0 / window.devicePixelRatio; // Calculate how much you want the viewport to shrink by 1px on a physical pixel
        let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
        document.write(text);

        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    </script>
</head>
<body>
</body>
</html>

<! Rem is the font size relative to the root element, and the font size is linearly mapped by the number of copies, so this is set by screen scale (number of copies).
Copy the code

    Important understanding (add a special color, this is really transparent)

    After zoomed in and zoomed out, the 1px pair written in the CSS is on a physical pixel. Rem is the size relative to the root element, and the size is linearly mapped according to the number of copies of the physical pixel, so it can be set according to the screen proportion (number of copies) to achieve the desired effect

    <! DOCTYPEhtml>
<html lang="en">
   <head>
   	<meta charset="UTF-8" />
   	<title>The essence of viewport scaling is to convert the innerWidth value into a physical pixel value, making the original linear mapping logic work</title>
   	<script>
           // Calculate how much you want the viewport to shrink by 1px on a physical pixel
   		let scale = 1.0 / window.devicePixelRatio;
   		let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
   		document.write(text);

   		document.documentElement.style.fontSize =
   			window.innerWidth / 7.5 + "px";
   		console.log(window.innerWidth);
   	</script>
   </head>
   <body></body>
</html>
Copy the code

The computed value of innerWidth corresponds to a physical pixel