This is the sixth day of my participation in the August Text Challenge.More challenges in August

Percentage layout

  • Percentage The method of mobile phone adaptation is the percentage of the child element relative to the parent element, so that the overall layout can achieve different screen zooming
  • advantages
    • The principle is simple and there are no compatibility problems
  • Disadvantages:
    • Fonts and positions within elements are difficult to zoom in and out of on different screens
    • Percentage layout is only suitable for pages with simple layout, but it is difficult to achieve customization for complex pages

Media queries

  • The interface is configured by querying the width of the device to execute different CSS codes
    @media only screen and (max-width:374px) {
        /* iphone5 or smaller size, with iphone5 width 320px scale style */
    }
    @media only screen and (min-width:375px) {
        /* iphone6, 7, 8, x */
    }
    @media only screen and (min-width:414px) {
        /* iphone6p or larger size, with the width of iphone6p 414px scale set style */
    }
Copy the code
  • Advantages:
    • When maintaining the same set of code for mobile terminal and PC terminal, the method is simple and the cost is low
  • Disadvantages:
    • Large amount of code, late maintenance is difficult

Flex layout

  • advantages
    • According to the rules of flexible layout, it is easy to achieve a certain layout effect, which is now the layout method adopted by most projects
  • disadvantages
    • Relatively speaking, compatibility is not very good

Vw layout

Viewports are the areas of the browser used to render web pages

  • Vw: 1VW is equal to 1% of the viewport width

  • Vh: 1vh equals 1% of the viewport height

  • Vmin: Choose the smallest of vw and vH

  • Vmax: Pick the one with the highest VW and vh

  • Disadvantages:

    • Compatibility issues

  • Advantages:

    • Pure CSS mobile adaptation solution, without js
    • Vw is much cleaner and simpler than REM

Rem + Viewport zoom

  • Advantages:
    • Compatibility is relatively good, the page will not deformation because of expansion, good adaptive effect
  • Disadvantages:

    • Font size needs to be changed with JS listening for resolution changes

    • When REM is converted to PX, there may be a decimal, which the browser will automatically round, and the length is not accurate

  • Fixed 1px on mobile
    • Cause of the problem:
      • CSS pixels on all devices are the same size when set to 1px
      • The number of physical pixels on a Retina display is assumed to be twice that of a normal screen, i.e., the same CSS 1px; The Retina display has two physical pixels, compared to one on the normal screen; They are all the same size but designers use 1px display logic with their retina1 physical pixels. This is the actual physical pixel i.e. 1 physical pixel on retina display = designer 1px; We understand it as CSS1px, so the designer thinks it’s thicker, because it can be thinner on Retina, which means 1px physical pixels, so CSS =0.5px is correct at this point
    • Solution:
      • Scale equally according to different screen sizes. Dynamically change the FONT size property of HTML by listening for different screen sizes. How to calculate font size? 1rem = 750/10 + ‘px’
      • Depending on the device pixel ratio, set the scale value on the view-port so that its physical pixels are always equal to the CSS pixels

conclusion

  • For strict restoration of hi-fi, including 1px problems proposed REM + Viwport scheme
  • Flex layouts are simple and easy to use, and the ease with which you can achieve the desired layout is the first choice for most projects
  • Of course, different layout schemes can be used in combination, such as flex, VW and REM layout in the project, which can be flexibly used according to the actual situation of the project