Meta Viewport Tag (Skeleton Tag)

The most standard viewport setup

  • Keep the viewport width consistent with the device
  • The default zoom ratio for the viewport is 1.0
  • Do not allow the user to zoom
  • The maximum allowed scaling ratio is 1.0
  • Minimum allowable scaling ratio 1.0

Remove gaps in the image

In setting image border styles, inline elements such as images or forms create a problem where there is a gap at the bottom of the image and between images. The reason is that carriage returns between elements in a line take up a certain width by default.

  • By default, vertical-align: middle is used to align the image with the text

1. Add vertical to img – align: middle | top and so on. Keep the image out of line with the baseline. (Can only modify the gap at the bottom of the picture)

img{
            /*vertical-align: bottom; * /
            vertical-align: top;
        }
Copy the code

2. Set the parent element of img to the same fixed height as img (can only modify the gap at the bottom of the image)

div{
         border: 1px solid red;
         height:280px ;
        }
Copy the code

3. Add display: block to img; Converting to block-level elements is no problem, and the float is set horizontally.

 img{
        display: block;
        float: left;
    }
Copy the code

4. Set the font size of the img parent element to 0px. If the parent element has other font elements, set the font size overwrite separately. (Recommended)

div{
            border: 1px solid red;
            font-size: 0;
        }
Copy the code

Figure 2 times

Double drawing: the design drawing is designed to be twice the actual size to solve the problem of blurred pictures in the equipment

  • Screen size: Refers to the diagonal length of the screen

  • Device size: 1366 x 768 px

    It means 1366 pixels horizontally and 768 pixels vertically

  • Pixel density: The number of pixels per inch that can be held (the higher the pixel density, the finer the picture, and vice versa)

  • Physical pixel to physical pixel ratio

    Physical pixels refer to the smallest particles displayed on the screen. Thanks to the display technology of retina screen, more physical pixels can be compressed into a screen, thus achieving higher resolution, and improving the screen’s delicate procedures, using clearer picture quality.

  • Physical pixels are also called resolutions

  • Double Sprite diagram of practice

    • Reduce the Sprite scale to half its original size
    • And then measure the coordinates according to the size
    • Pay attention toBackground-size is half the width of the Sprite

Image format

  • DPG image compression technology

    • Features: Compressed picture, can save users nearly 50% browsing traffic, improve access speed, also compatible with JPEG, DPG picture and WebP picture clarity contrast no difference

  • Webp image format

    • Webp image is a fast image loading image format, image compression volume is only about 2/3 of JPEG, and can save a lot of server broadband resources and data space

Css initialization

  • Normalize.css/is recommended for mobile CSS initialization
  • Normalize.css: Protects valuable defaults
  • Normalize.css: Fixed browser bugs
  • Normalize. CSS: is modular
  • Normalize. CSS: Has detailed documentation
  • Website address: necolas. Making. IO/normalize. C…

Background scaling background-size

Background-size specifies the size of the background image

background-size: percentage width height of | | | cover | containCopy the code
  • coverIf the background image is stretched to cover the background area, the background image may not be fully displayed.
  • containStretch the background image proportionally, and as long as there is a condition of height or width that fills the background area, it will stop stretching, and the background area may be partially blank

Css3 box model box-sizing

  • The traditional box model is: box width =padding+width +border

  • Css3 box model is: box width =width (where width includes padding and border)

    • In cSS3’s box model, padding and border do not stretch the box
    /*CSS3 box model */
box-sizing: border-box;
Copy the code

Note: PC needs to be fully compatible, so cSS3 box model cannot be used, if compatibility is not considered we will choose CSS box model.

Common mobile layout

  1. Fluid layout(100% layout)
  2. flexFlexible layout (highly recommended)
  3. less+remMedia Query Layout
  4. Hybrid layout

responsive

  • Media queries

    • bootstarp

Fluid layout

  • By setting the boxThe percentageWidth to scale, not limited by fixed pixels, content is filled to the side.
  • Max-width Maximum width (max-height maximum height)
  • Min-width Limit minimum width (min-height minimum height)

Flex Flex layout

Flex is an acronym for flexible Box

  • The float, clear, and vertical-align attributes of the child elements become invalid when the parent element sets the flex elasticity
  • Control the placement and arrangement of child elements by adding Flex attributes to the parent element.

Common attributes of the parent element

  • Flex-direction: sets the spindle direction
  • Context-content: Sets the arrangement of child elements on the main axis
  • Flex-wrap: Sets whether a child element is wrapped on a line
  • Align-content: Sets the arrangement of children on the side axis (multiple lines)
  • Align-items: Sets the arrangement of child elements on the side axis (single row)
  • Flex-flow: compound property, equivalent to setting both flex-direction and flex-wrap

Flex-direction Sets the spindle direction

  • The default spindle direction isxAxial direction, left to right
  • The default side axis is going to beyIn the axial direction, from the top down
  • Note: spindle and side axis can be interchangeable, seeflex-directionWho’s the main axis, and what’s left is the side axis. The child elements are arranged in principal axes.

Context-content sets the arrangement of elements on the main axis

  • Add to the parent elementjustify-contentSets the arrangement of child elements
  • Pay attention to: Be sure to specify the main axis before using this property
Attribute values instructions
flex-start The default valueStart at the head and go left to right if the main axis is x
flex-end I’m going to start at the tail
center Align in axis center (horizontally centered if axis is x)
space-around Bisecting remaining space
space-between Edge each side and then divide the rest of the space

Flex-wrap sets whether a child element is newline

  • By default, child elements are arranged inOn the main shaftThe Flex layout default isDon't wrapthe
  • Set up theThe flex - wrap: wrapYou can break a line
Attribute values instructions
nowrap The default valueDon’t wrap
wrap A newline

Align-items Sets the arrangement of child elements on the side axis (single row)

  • This property controls the arrangement of child elements on the side axis (y),Single use)
  • Set up thejustify-content(Spindle X) horizontally centered with setalign-items(Side axis Y) vertical center can be achievedHorizontal and vertical center
Attribute values instructions
flex-start The default valueFrom top to bottom
flex-end From the bottom up
center Center the y-side axis
stretch The tensile

Align-content Sets the arrangement of child elements on the side axis (multiple lines)

  • This property controls the arrangement of child elements when a newline occurs. It has no effect on a single line.

    Attribute values instructions
    flex-start The default valueBegin to align at the head of the lateral axis
    flex-end Begin to align at the tail of the side axis
    center Display in the middle of the side axis
    space-around The subterm bisects the remaining space on the lateral axis
    space-between The subterm is first distributed at both ends of the lateral axis and then bisects the remaining space
    stretch Sets the height of the child element to equal the height of the parent element

Align-content is different from align-items

  • Align-items work on a single line, with only up-aligned, down-aligned, centered, and stretched
  • Align-content is suitable for line feed (multiple lines) (not valid for single line). You can set up, down, center, stretch, and evenly allocate the remaining space.
  • So the summary is single line for align-items and multiple lines for align-content

Flex-flow compound property

  • The flex-flow property is a compound property of the Flex-direction and flex-wrap properties

     flex-flow:row wrap;
Copy the code

Common attributes of child elements

Flex properties

  • The Flex property defines the remaining space allocated by the child element and uses the Flex property to indicate how many copies of the child element are in the parent element

    .item{
   flex: <number>: /*default 0*/
}
Copy the code

The align – self controlChild elementsThe arrangement on the lateral axis

  • align-selfProperty allows you to set the alignment of child elements to override the parent element’salign-itemsattribute
  • span:nth-child(2) {
      /* Set your position on the side axis */
      align-self: flex-end;
}
Copy the code
Attribute values instructions
flex-start The default valueFrom top to bottom
flex-end From the bottom up
center Center the y-side axis
stretch The tensile

The order attribute defines the order between the child elements

  • The smaller the value is, the more advanced it is. The default value is 0
  • Note: Not the same as z-index
.item {
    order: -1 ;  /*order can be set to a negative */ 
}
Copy the code

Media queries

What is media inquiry?

  • @mediaYou can set different styles depending on the size of the screen
  • use@ media query, you can define different styles for different media types

Syntax specification for media queries

  • Media query specifications are written in ascending or descending order

  • Notice that you start with @mediaThe @ sign is used to declare
  • Mediatype Media querytype
  • Keyword and not only
  • media feature Media propertiesMust be enclosed by parentheses
// @declaration/Media query type/Keyword/Media feature @media Mediatypeand|not|only (media feature) {
    CSS-Code;
}
Copy the code

  1. Mediatype Query type

    • The division of different devices into different types is called media query types

      value instructions
      all For all equipment
      print For printers and print previews
      scree For computer screens, tablets, smartphones, etc

  2. And not only keyword

    • The keyword is used to link media types or multiple media features together as a media query condition

      value instructions
      and Multiple media features can be linked together, equivalent to "and (&&)"
      not To exclude a media type is equivalent to “not (!)” The meaning of “can be omitted
      only Specifies a specific media type, which can be omitted

  3. Media feature Media feature

    • Each media type has its own different characteristics and sets up different presentation styles according to the media advancement of different media types.

    • Note; Media features need to be enclosed in parentheses

      value explain
      width Defines the width of the visible area of the page
      min-width Defines the width of the minimum visible area of the page
      max- width Defines the width of the maximum viewable area of the page

Import resources for media queries

  • When styles are cumbersome, you can use different CSS for different media
  • How it works: Use the media query in link to determine the size of the device, and then introduce different CSS files
/* Syntax specification */
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
/ * sample * /
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">
Copy the code

Rem adaptive layout

The use of rem

How does the text on a real page change with the size of the screen?

How do I scale the height and width of real elements with screen size?

  • Em is the size of the text relative to the font size of the parent element

  • Rem is the size of the text relative to the font size of the root element HTML

    • Font-size =12px: non-element; width: 2rem; If I change it to PX, it’s 24px

  • Note the advantages of REM: the parent element text size may be inconsistent, but the entire page has only one HTML, which gives you good control over the size of the entire page

    /* Root HTML is 12px */
html {
   font-size: 12px;
}
/* The font size of the div is 24px */       
div {
    font-size: 2rem;
}
Copy the code

Rem adaptation scheme

Plan a

Less + REM + Media query

① Let’s say the design is 750px

② Suppose we divide the whole screen into 15 equal parts (the dividing standard can be 20 or 10 equal parts)

③ Each copy as HTML font size, here is 50px

④ On a 320px device, a font size of 320/15 is 21.33px

⑤ Divide the size of our page elements by the different HTML font sizes and you will find that the ratio is still the same

conclusion

  • The final formula: the REM value of the page element=Element value of the design draft (PX)/(Screen width/Number of shares)
  • The screen width/partition is the font szie size of the HTML root element
  • Or: rem value of the page element = page element value (px)/HTML font size font size

Scheme 2

flexible.js+rem

use

  • Using JS automatic processing, the principle is to divide the device into 10 equal parts, but under different devices, the proportion is the same.

  • Github address: github.com/amfe/lib-fl…

  • Use the script tag to import the flexible.js file

    // Add flexible. Js file to index. HTML
<script src="js/flexible.js"><script>
Copy the code

conclusion

  • Flexibility.js divides the screen into 10 equal parts
  • The flexibility.js file can be used to calculate the fort-size text size of THML based on the screen size of the device
  • Rem of page elements = element size of design/(device screen width/partition score),
  • Need to combinecssremCssrem to convert PX to REM

Cssrem plugin (PX conversion REM)

Search for and install vscode in the vscode plug-in store, and after the installation is complete, you need to restart vscode

  • Note: the automatic conversion of CSS to REM in CSSREM is based on the 16 conversion of the default plugin, so you need to configure it yourself

  • In general development, the default 16 will need to be manually changed to (device screen width/partition fraction) the fort-size text size of THML

  • The modified size is (device screen width/partition fraction) HTML fort-size

Less basis

Common CSS preprocessors are Less, Sass, and Stylus

Disadvantages of traditional CSS maintenance

  • CSS is a markup language with no concepts of variables, functions, operations, etc
  • CSS is bad for code reuse, maintenance, and extension. The CSS is highly redundant.

Less is introduced

  • Less is a CSS extension language that is also known as the CSS preprocessor
  • Less in THE CSS language based on the introduction of variables, functions, operations and functions, greatly simplified the preparation of CSS.
  • Less is conducive to CSS maintenance and reuse.
  • Less Website: http://lesscss.cn/

Less installation

  • ① To install nodeJS, choose 8.0 version and go to nodejs.cn/download/
  • ② Check whether the installation is successful, use CMD command (Win10 is Windows +r open run CMD) — enter “node -v” to check the version
  • ③ To install Less online based on nodeJS, run the NPM install -g Less command
  • 4 Check whether the installation is successfulcmdThe command”lessc -v“Check the version

@import Imports the Less file

//@importYou can import a less style file into another less style file"Less file path"
Copy the code

The variable used by Less

A variable is something that has no fixed value and can be changed. Because some of the colors and values in our CSS are often used.

@ Variable name: value;Copy the code
  • Must bePrefix with @ (@ declares variables)
  • Cannot contain special characters
  • You can’t start with a number
  • Case sensitivity
// Define a pink variable in CSS@color: pink; / / use@colorVariable body {color:@color
}
a: hover {color:@color
}
Copy the code
  • Less compilationVocode Less plug-in
  • The Easy LESS plugin is used to compile LESS files into CSS files
  • After installing the plug-in, reload vscode.
  • Simply save the Less file and the CSS file will be generated automatically.

Less nested

If you met (intersection | pseudo class selector | | pseudo elements)

  • Front of the inner selectorNo ampersand, it is resolved to be a descendant of the parent selector
  • ifHave the & symbol, it is resolved to the parent element itself or a pseudo-class of the parent element
// Traditional CSS writinga:hover{
   color:red} //Less nestinga{&:hover{
        color:red; }}Copy the code

Less operation

  • Any number, color, or variable can be used. Less provides arithmetic operations of addition (+), subtraction (-), multiplication (*), and division (/).
  • Perform an operation on the value of two different units, and the resulting value takes the units of the first value
  • Operators must be separated by Spaces such as 1px + 5
/*Less */
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/* Generated CSS */
div {
  border: 15px solid red;
}
/* Even use the @width variable of less */
width: (@width + 5) * 2;
​
Copy the code

Responsive layout

Response principle

  • Use media queries to set up different styles and layouts for different widths to suit different devices.

  • Division of equipment:

    • Smaller than 768 is the ultra-small screen (mobile phone)
    • 768~992 are small screen devices (tablet)
    • Medium screen from 992 to 1200 (desktop monitor)
    • Widescreen devices larger than 1200 (large desktop monitor)

Reactive layout container

Reactive requires a parent as a layout container to coordinate with the child elements to implement changes.

The principle is in different screens, through media query to change the size of the layout container, and then change the arrangement and size of the face elements, so as to achieve different screens, see different page layout and style changes.

The size division of the parent container

  • Ultra Small Screen (mobile phone, less than 768px) : Set the width to 100%
  • Small screen (flat screen, 768px or larger) : Set the width to 750px
  • Medium screen (desktop monitor, 992px or more) : Set the width to 970px
  • Large screen (large desktop display, 1200px or greater) : Set the width to 1170px

But we can also define our own division based on the actual situation

 <style>
        /* The width of the element depends on the width of the screen */
        .container {
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        /* 1. The width of the container under the ultra-small screen smaller than 768 is 100% */
        
        @media screen and (max-width: 767px) {
            .container {
                width: 100%; }}/* 2. Under the small screen greater than or equal to 768 layout container changed to 750px */
        
        @media screen and (min-width: 768px) {
            .container {
                width: 750px; }}/* 3. Medium screen size > 992px layout container changed to 970px */
        
        @media screen and (min-width: 992px) {
            .container {
                width: 970px; }}/* 4. Under the big screen > 1200 layout container changed to 1170 */
        
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
​
<body> <! In responsive development, you need a layout container.div class="container"></div>
</body>
​
Copy the code