preface

The book goes back, did not see my written hand to hand teach you series of CSS foundation - students hurry to have a look! This time we will cover the CSS3 animation series and the very important four solutions for mobile Web adaptation: streaming layout, Flex layout, REM layout and raster system.Copy the code

The body of the

Animation definition

<style> div { width: 100px; height: 100px; background-color: aquamarine; /* animation name */ animation-name: move; /* animation duration */ animation-duration: 2s; /* Animation -timing-function: ease-in-out; /* Animation -delay: 2s; /* Specifies the number of times the animation plays infinite: infinite */ animation-rotund-count: infinite; /* animation-direction: alternate; /* State after animation */ animation-fel-mode: forward; } @keyframes move{ 0% { transform: translate(0px) } 100% { transform: Div :hover {/* Specifies whether the animation is paused or played */ animation-play-state: paused; } </style> /* Short form animation: animation name duration motion curve When to start playback times whether to reverse direction start and end state */ name duration timing-function delay iteration-count direction fill-modeCopy the code

Animation Form 2

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateX(-45deg)
}
Copy the code

Mobile Web Adaptation – General tips

< meta name = "viewport" content = "width = device - width, initial - scale = 1.0, User - scalable = no, maximum - scale = 1.0, the minimum - scale = 1.0 ">Copy the code

The viewport, whatever it is, must be added to the head tag

General mobile Web reference iphone6 size design, 750*1334. So the artist needs to provide a double image, because on the phone either 1px is equal to a pixel on the phone, and the image will scale. So we can use the double image to reduce it by half, so that it looks normal on the phone.

Background-size: width of background image height of background image;Copy the code

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

Mobile makes heavy use of the box model

/* box-sizing: border-box; /* Box-sizing: content-box;Copy the code

The padding and border of the box model are in their own box, which is different from the traditional box model. This layout is not easy to cause layout confusion due to the inner margin and border stretching the box.

Mobile special style

/* box-sizing: border-box; -webkit-box-sizing: border-box; */ -webkit-tap-highlight-color: transparent; */ -webkit-tap-highlight-color: transparent; /* Add this attribute to iOS to customize buttons and input fields */ -webkit-appearance: none; /* disable the pop-up menu */ img,a {-webkit-touch-callout: none; }Copy the code

Mobile Web Adaptation – Streaming layout

body { width: 100%; min-width: 320px; max-width: 640px; margin: 0 auto; font-size: 14px; font-family: -apple-system, Helvetica, sans-serif; color: #666; The line - height: 1.5; }Copy the code

Width does not specify a specific PX value, but a percentage is set to achieve the desired effect. With this in mind, streaming layout adaptation can be used well.

Mobile Web Adaptation — Flex

  • Flex, short for Flexible Box, is used to provide maximum flexibility to Box models, and any container can be specified as a Flex layout.
  • When we set the parent box to flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.
  • Flex layout is also called flex layout, elastic layout, flex box layout, or elastic box layout

Summary: You can control the placement and arrangement of child boxes by adding flex properties to the parent box

Note: Do not use it on PC as far as possible, there will be compatibility problems

Parent layout common properties

  • 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

Sublayout common properties

  • Number of Flex subprojects (most commonly used)
  • Align-self controls how the children align themselves on the side axis
  • The order attribute defines the order in which the children are sorted (sequential)
    .item {
        flex: <number>; /* Default value 0 */
    }
    span:nth-child(2) {
          /* Set your position on the side axis */
          align-self: flex-end;
    }
    .item {
        order: <number>;
    }
Copy the code

Mobile Web Adaptation — REM (recommended)

Rem unit

Rem (root EM) is a relative unit, similar to EM, which is the font size of the parent element.

The difference is that REM is based on the font size relative to HTML elements.

For example, set font size=12px for the root element (HTML); Width :2rem; If I change it to PX, it’s 24px.

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

Rem’s advantage: 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.

Media queries
  • Using @media queries, you can define different styles for different media types
  • @Media can set different styles for different screen sizes
  • When you resize the browser, the page will also be rerendered according to the width and height of the browser
  • At present, multimedia query is used for many apple phones, Android phones, tablets and other devices
 html {
      font-size: 50px;
    }
    
    @media screen and (min-width: 320px) {html {
        font-size: 1rem; }}@media screen and (min-width: 360px) {
      html {
        font-size: 2rem; }}@media screen and (min-width: 375px) {
        html {
          font-size: 3rem; }}Copy the code
Less basis

Of course, it is possible to match rem units and media queries, but it is impossible to use a calculator to figure out how much each PX on a design map translates into REM. It would be nice if CSS had functions or addition, subtraction, multiplication and division like many back-end languages, which is what less is for. And of course there’s sass and here we’re going to use less syntax. First download Node, then download less, and then configure less. I’m using WebStorm, configuration information can be searched online and I won’t introduce it here. Because browsers don’t know the syntax of less, less will eventually be converted to CSS for the page to use.

@ Variable name: value; @color: pink;Copy the code

nested

// Change the CSS to less # header. logo {width: 300px; } #header { .logo { width: 300px; }}Copy the code

Intersection | | pseudo class pseudo element selector), use & connection

a:hover{ color:red; } a{ &:hover{ color:red; }}Copy the code

operation

/*Less */ @witdh: 10px + 5; div { border: @witdh solid red; } /* Generated CSS */ div {border: 15px solid red; } /*Less */ width: (@width + 5) * 2;Copy the code
  • How to write multiplication (*) and division (/)
  • The 1px + 5 operator is separated by a space between the left and right
  • For an operation between the values of two different units, the resulting value takes the units of the first value
  • If only one value between two values has a unit, the result of the operation takes that unit

Two technical schemes of REM adaptation:

1. Less + REM + media

2.lflexible.js+rem

Adaptation process

① 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

⑥ For example, we take 750 as the standard design draft

⑦ A 100100 pixel page element under 750 screen is 100/50 converted to REM is 2rem2REM ratio is 1 to 1

⑧ Under the screen of 320, the HTML font size is 21.33, then 2rem= 42.66px. At this time, the width and height are 42.66, but the ratio of width and height is still 1:1

⑨ But you can already scale the page element boxes equally under different screens

Conclusion:

① Final formula: page element REM value = page element value (px)/(screen width/partition number)

② The width of the screen/partition number is htmlfont-size size

Rem value = page element value (px)/HTML font size

Mobile Web Adaptation – Grid system

Ultimately, the grid system relies on media queries to monitor different screen sizes, using Bootstrap, an open source front-end frameworkCopy the code

Bootstrap provides a responsive, mobile-first streaming grid system that automatically divides into up to 12 columns as the screen or viewport size increases.

The grid system is used to create a page layout with a series of rows and columns into which your content can be placed.

  • It is divided into 1 to 12 equal portions according to different screens
  • A row can remove 15px margins from the parent container
  • Xs -extra small: super small; Sm – small: small; Md-medium: medium; Lg – large: big;
  • If a column is greater than 12, the element containing the extra column will be arranged as a whole on another line
  • Each column defaults to about 15 pixels of padding
  • For example, class=” col-mD-4 col-SM-6″

Simple to use

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0, user - scalable = no, maximum - scale = 1.0, the minimum - scale = 1.0 "> <! -- [if lt IE 9] > < script SRC = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" > < / script > < script SRC = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js" > < / script > <! [endif]--> <! - do not forget to introduce the style of the bootstrap file - > < link rel = "stylesheet" href = "bootstrap/CSS/bootstrap. Min. CSS" > < title > title < / title > <style> .row>div { height: 50px; background-color: pink; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="row"> <div class="col-md-4">a</div> <div class="col-md-8">b</div> </div> </div> <div class="col-md-4">2</div> <div class="col-md-4">3</div> </div> </div> </body> </html>Copy the code

Effect of simple

conclusion

Finished work, next we will enter js study, please look forward to!!