viewport

<meta name="viewport" content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Copy the code
attribute explain
width The width is set toviewportWidth, subject settingdevice-widthSpecial values
initial-scale The initial scaling ratio is greater than0The number of
maximum-scale Maximum scaling ratio, greater than0The number of
minimum-scale Minimum scale ratio, greater than0The number of
user-scalable Whether the user can zoom,yesorno(0or1)

CSS initialization specifications

Normalize.css

It can be downloaded online.

Button style

  • Remove button highlighting
    • -webkit-tap-highlight-color : transparent;
  • Add this property to ios to customize the look and feel of buttons and input fields on mobile browsers
    • -webkit-appearance : none;
  • Disable the pop-up menu when long pressing the page
    • Img, a {- its - touch - the callout: none; }

Streaming layout (percentage layout)

  • Max-width Maximum width (max-height maximum height)

  • Min-width Minimum width (min-height minimum height)

Rem layout

  • em: Font size of the parent element
    • If the font size of the parent element is12px, the child element width is set10emThe equivalent of12*10px=120px
  • rem:htmlThe font size of the element
    • htmlThe element of the tag is14px, the width of an element10remThe equivalent of14*10px=140px

Media queries

On our screen, and the maximum width is 800 pixels, set the style we want to the max-width is less than or equal to 800 media queries can change different styles according to different screen sizes */
@media screen and(max-width:800px) {body{
    background-color:pink; }}@media screen and(max-width:500px) {body{
    background-color:purple
  }
}
Copy the code

Media query import file

<style>
/* When our screen is larger than or equal to 640px, div shows two in a row. When our screen is smaller than 640px, div shows one in a row
</style>
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
Copy the code

Less preprocessor language

Suffix:.less

  • Declare a variable

    • @key:value;
    • Does not start with a number, does not contain special symbols, and is case sensitive

  • compile

    • inVScodeDownload the plug-ineasy less, after installation, save each timelessA file with the same name is generated or updated in the same directorycssfile

  • nested

    .header{
  width:200px;
  height:200px;
  background-color:pink;
  / * 1. Less child elements nested style to the parent element inside directly by the * / 
}
a{
  color:red;
  /* If there are pseudo-classes, intersection selectors, pseudo-element selectors, we need to add & */ before the memory selectors
  &:hover{
    color:blue; }}Copy the code

  • The operator

    • The left and right sides of our operator must be separated by a space
    • If only one of the two numbers has a unit, the final result is based on that unit
    • Two numbers are involved in the operation. If both numbers have units, and the units are different, the first unit is used

  • Less import less

    • @import 'path'
    • The suffix name can be omitted

  • Rem adaptation scheme 1

    • Divide yourself, set yourselfrem

  • Rem adaptation scheme 2

    • flexible.js, divided into 10 pieces

  • The px – > rem unit

    • vscode downloadcssrem
    • Can be found inUser-SettingsChanges in thecssrem.rootFontSizeModify thehtmlThe font size