This is the 15th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Why mobile?

  1. A project typically has product maps for both mobile and PC
  2. In order to reduce the workload, we will adapt it to mobile while developing the PC

How to adapt to mobile

unit

The first thing we need to consider when making mobile adaptation is the setting of element units

  • Relative unit

    • The percentage % :

    • Em: Element Meter calculates dimensions based on document fonts

    • Rem: Root Element Meter calculates dimensions based on the Root document (Body/HTML) font

    • Ex: height of document character “x”

    • Ch: the width of the document number “0”

    • Vh: View height Height of the viewing range

    • Vw: View width View width

    • Vmin: View min The smaller size of the width or height of the visible range

    • Vmax: View Max The larger size of the width or height of the visible range

  • Absolute unit

    • P: Pixel pixels
    • Pt: Points pounds
    • PC: Picas send CARDS
    • In: Inches Inches
    • Mm: Millimeter mm
    • Cm: Centimeter cm
    • Q: It’s a Quarter millimeters

The unit used

  1. Use of relative units

    • % : Width relative to parent element

      <body>
    <div class="parent">
        <div class="children"></div>
    </div>
</body>

<style>
.parent { width: 100px }
.children { width: 50% }
</style>
Copy the code

    • Em: Relative to the font size of the text in the current document object,

      If font size is not specified, it inherits from the parent element.

      And so on up to body, which is the browser default if not specified.

      body {
    font-size: 14px;
}
.element {
    width: 2em;
    /* 2em === 28px */
}
Copy the code

    • Rem: Calculates the size from the root document (body/ HTML) font

    • Vh: The viewable range is divided into 100 vh/ VW units relative to the height and width of the viewable range

      div {
    height: 10vh;
    /* If the screen height is 1000px, the element height is 100px */
}
Copy the code

    • Vmin/vmax The smaller/larger size of the width or height of the visual range

      Assume the screen is 960px high and 500px wide

      div {
    height:1vmax;
    width:2vmin;
}
Copy the code

      The box is 10px wide and 19.2px high.

  2. The use of absolute units

    • Px: pixel px relative to the screen resolution of the device display

      div {
    height:100px;
    wight:100px;
}
Copy the code

    • Pt :1 pt = 1/72 inch

    • PC: twelve o ‘clock type (used in printing), equivalent to the size of China’s new type 4.

    • In:”

    • Mm: mm

    • Cm: cm

    • Q: A quarter of a millimeter

Media queries

Media query name thought meaning, query media types to perform different operations

  1. grammar

    @media screen and (max-width: 300px) {style sheet}Copy the code
    • Screen is the media type
    • Max-width Indicates the media function

  2. The manual

    Portal (CSS Media Query (w3school.com.cn))