Mobile browser adaptation_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:45:41
Original
1328 people have browsed it

meta

You often see a code like this when making mobile web pages

  • width=device-width sets the width of the view equal to the width of the device screen
  • initial-scale=1 Set the initial scaling to 1
  • minimum-scale=1 Set the minimum scaling to 1
  • maximum-scale= 1 Set the maximum scaling ratio to 1
  • user-scalable=no Do not allow scaling
  • Do a simple and crude transformation


    Set the width of the view to 320, the maximum zoom ratio to 1.3, and do not set the initial zoom ratio.
    This allows the entire view to be scaled

    rem

    Font unit

  • px no inheritance, commonly used
  • em inheritance, relative to Parent element inheritance
  • rem inheritance, compared to root inheritance, is generally html, css3 attribute, supports IE9 and other modern browsers
  • vh 1vh=window height/ 100, is css3 attribute, supports IE9, chrome20, firefox19, safari6, android browser4.4
  • vw 1vw=window width/100

    Use rem

    Use js to calculate the font-size of the root element to adapt to various screens

    Use vh

    vh is originally the height of the window, and it can be adapted according to the height of the window of different screens

  • p.s. As expected, I still don’t know how to blog

    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template