This is the fifth day of my participation in the August Wen Challenge.More challenges in August

Media Query

Media query is to query devices according to certain conditions and make the devices that meet the conditions display the corresponding styles. In this way, different devices display different styles.

With media queries, we can adjust our website or application based on the value or presence of various device features and parameters.

Here is an example of a media query that displays different colors with different screen widths on different devices

<style>
 @media (max-width: 768px) {* / / * 0 ~ 768
    body{
        background: red; }}@media (max-width: 425px) {* / / * 0 ~ 425
    body{
        background: yellow; }}@media (max-width: 375px) {* / / * 0 ~ 375
    body{
        background: blue; }}@media (max-width: 320px) {* / / * 0 ~ 320
    body{
        background: pink; }}@media (min-width: 769px) {/ * 769 ~ + up * /
    body{
        background: green;
    }
 }  
</style> 
/* Pay attention to the order, priority */
Copy the code

See the effect

Or I could write it this way

<style>
  @media (max-width: 320px) {* / / * 0 ~ 320
      body{
          background: pink; }}@media (min-width: 321px) and (max-width: 375px) {/ * * / 321 ~ 768
      body{
          background: red; }}@media (min-width: 376px) and (max-width: 425px) {/ * * / 376 ~ 425
      body{
          background: yellow; }}@media (min-width: 426px) and (max-width: 768px) {/ * * / 426 ~ 768
      body{
          background: blue; }}@media (min-width: 769px) {/ * 769 ~ + up * /
      body{
          background: green;
      }
   }
</style>
Copy the code

See the effect

In addition, the results of media queries can be replaced with files, which can be implemented by referring to external CSS files. For example,

<link rel="stylesheet" href="style.css" media="(max-width: 320px)">

The link label is valid only if the device width is between 0 and 320px. The link label is valid only if the device width is between 0 and 320px.

Note: the file content in the link tag will be downloaded first, and then determine whether it takes effect according to the query conditions.

A responsive navigation bar demo

From the above examples, we can see that the essence of a responsive page is to write the content of two pages (mobile +PC) on the same page, and then switch which page to use according to the query criteria.

Why don’t we write the contents of the mobile and PC pages in two separate pages and let the back end switch the state?

Backend pseudocode

{{if useragent.test (/iPhone/)}} {{= iphone_index.html'}} /* If useragent.test (/iPhone/)}} {{else}} {{= render */ 'pc_index.html'}} /* Otherwise render PC side page */ {{end}}Copy the code

Yes, it can, but not in the current fashion. By doing so, a page cannot determine whether its URL is mobile or PC

Then let’s take a look at Taobao, JINGdong and other websites how to do the response type?

When we visit Taobao.com on the PC, its domain name is

Then use developer tools to switch to the mobile terminal, found that taobao’s domain name changed

Notice the difference? Taobao’s mobile terminal page and PC terminal page each have a domain name, so in fact taobao’s mobile terminal and PC terminal are two different websites. In fact, Taobao does not respond. The mobile terminal department and THE PC department of Taobao are actually two different departments, which are respectively responsible for the mobile terminal page and the PC terminal page. The same goes for JD.com’s website.

Backend pseudocode

{{if userAgent.test(/iPhone/)}} {{redirect_to 'https://h5.m.taobao.com'}} /* Check whether the domain name is mobile, */ {{else}} {{= render 'pc_index.html'}} /* / {{end}}Copy the code

Very few websites are responsive these days, only simple news sites or blog sites are responsive because their pages are simple and there is not much interaction.

On mobile you need to add a Meta ViewPort

For some historical reasons, mobile pages have been scaled to 980px by default (most PC pages are 980px wide). For example, the iphone6 uses 375px to simulate the 980px width of PC pages.

To solve this default zoom problem, add a Meta ViewPort tag to the page

<meta name="viewport" content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">// width=device-width: // user-scalable=no: // initial-scale=1.0: // width=device-width: // user-scalable=no: // initial-scale=1.0: Set the initial scale of the page to 1.0 (no scaling) // maximum-scale=1.0: the maximum scale allowed for the user is 1.0 // minimum-scale=1.0: the minimum scale allowed for the user is 1.0Copy the code

So that solves the 980 problem

What’s the difference between a mobile page and a PC page

The interaction mode of the mobile page is different from that of the PC page, as follows:

  1. There is no hover
  2. There is no click event, but there is a touch event (you can use the touch event to simulate the user’s sliding event, just need to record the position of the two touches, observe the difference between the two touches, and know which direction the user is sliding).
  3. Cannot resize, viewPort width is always equal to the width of the device (PC page width! == device width, page size can be arbitrarily adjusted), the screen is always fixed width and height, so there is no way to resize the page.
  4. No scroll bar.
    • The scroll bar only appears when you swipe on the mobile device and is automatically hidden when you stop sliding.
    • Example: Mobile does a horizontal scroll without a scroll bar

There are few other differences, and there is (almost) no Internet Explorer on mobile, so you can use many of the latest CSS3 properties like Transform, Transation, animation, etc.

conclusion

  • The essence of a responsive page is to write the content of two pages (mobile +PC) on the same page, and then switch which page to use according to the query criteria
  • If it is the state between the same page, use JS to switch the state; If the state is between different screens, use the media query to switch the state
  • For mobile media query & Meta ViewPort
  • The interaction mode of the mobile page is different from that of the PC page
  • Learn to hide elementsdisplay: none;, common properties of the mobile terminaldisplay: flex.width: calc(50% - 10px);
  • Mobile-first: preferentially designs the mobile page, and desktop-first: preferentially designs the PC page