Simple navigation head combat

Covering technical points

  • HTML, CSS,

  • Vw + REM units fit

  • Conversion between px, REM and VW units

steps

  • rendering

  • Handle HTML

    • Viewport Settings: the width is the width of the device and the font cannot be scaled

    • Importing CSS files

    • Build the skeleton of the navigation head

      • Menu and Login are a tabs
      • The navigation icon is an H1 header
      <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Nav</title> <link rel="stylesheet" href="./index.css"> </head> <body> <header> <a href="#" Id = "menu" > menu < / a > < a href = "#" id = "login" > login < / a > < h1 id = "logo" > Ellen.com < / h1 > < header > < / body > < / HTML >Copy the code
  • Setting the CSS

    • Clear the browser’s base default styles, see lines 1-24

      • -webkit-text-size-adjust: none; Disable text zooming
      • -webkit-tap-highlight-color: rgba(0,0,0,0);
      • -webkit-appearance: None; border-radius: 0px;

    • Focus on setting the basic HTML font size value

      • In future convenient calculation, 100px = 1rem is usually used as the reference value of REM
      • Assuming a design width of 750px, 7.5rem = 100vw = 1.0 viewable area width
      • The vw value of the basic font size is: 100vw / 7.5rem = 13.3333333… Vw. Font-size: calc(100vw /7.5);

    • Set the default font size for the browser

      • Font-size:.24rem;

    • Set elements, image width and height

      • The element converts rem units based on the base value 100px = 1rem. For example, in the following code the menu width is 80px so we get 0.8rem
      • The size of the image is fixed, so if you want the image to fit, you need to set the width and height of the image. For example, if the image in line 54 is 40px wide and 35px high, change it to.4rem.35rem. Then the image will change according to the size of the viewport.
    • body{
    margin: 0;
    padding: 0;
}
h1.h2.h3.h4.p{
    margin: 0;
    /* Disallows text zooming */
    -webkit-text-size-adjust: none;
}
ul.li{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    border: none;
    vertical-align: top;
}
a.button.input{
    /* Highlight when clicked */
    -webkit-tap-highlight-color: rgba(0.0.0.0);
    -webkit-appearance: none;
    border-radius: 0px;
/* Ios button has rounded corners, kill it */
}
html{
Font-size: 100vw / 7.5rem = 13.3333333... * /
    font-size: calc(100vw /7.5);
}
body{
    font-size:.24rem;
}

header{
    position: fixed;
    left: 0;
    top: 0;
    width: 7.5 rem;
    height:.9rem;
    background-color: # 323436;
    overflow: hidden;
}
#menu{
    position: absolute;
    left: 0;
    top: 0;
    width:.8rem;
    height: 0;
    background: url("img/meun.png" )no-repeat center;
    padding-top:.9rem;
    background-size:.4rem .35rem;
}
#login{
    position: absolute;
    top: 0;
    right: 0;
    width:.8rem;
    height: 0;
    padding-top:.9rem;
    background: url("img/login.png" )no-repeat center;
    background-size:.5rem .52rem;
}
#logo{
    width: 7.5 rem;
    padding-top:.9rem;
    background:url("img/logo.png") no-repeat center .27rem;
    background-size: 1.83 rem .44rem;
}
Copy the code

interrupt

Initial contact with mobile adaptation of children can try this simple small demo, to do quickly familiar with mobile adaptation, as well as conversion between three units. Complete code demo will follow up to save ~~ move brick people blunt duck!!