The mobile web

PC Web Premium

Create a Favicon

Convert PNG images to ICO ICONS

www.bitbug.net/

tdk

<head>.<title>Product shopping mall - comprehensive online shopping first choice - genuine low price, quality assurance, timely delivery, easy shopping!</title>
    <! -- Website description -->
    <meta name="description"
        content="Pinyoushopping mall - a professional and comprehensive online shopping mall, selling home appliances, digital communications, computers, household department stores, clothing clothing, mother and baby, books, food and other tens of thousands of brand quality goods. Convenient, honest service, to provide you with a pleasant online shopping experience!" />
    <! -- Keywords -->
    <meta name="keywords" content="Online shopping, online mall, mobile phone, notebook, computer,MP3,CD,VCD,DV, camera, digital, accessories, watches, memory card, JINGdong" />.</head>
Copy the code

Box concatenation properties

border-style: solid; Border-top: 0px; border-bottom: 0px; border-bottom: 0px; border-bottom: 0px; border-bottom: 0px; border-bottom: 0px; border-color: red green yellow blue;

Mobile private prefix

The kernel	The prefix	Major browsers
Trident	-ms-	Internet Explorer
Gecko	-moz-	Firefox
Webkit	`-webkit-`	Chrome, Opera, Safari, Android
Presto	-o-	Early Opera

Viewport: The size of a mobile web page

Name: property to be set. Viewport: viewport
Content: The content to set
Width =device-width: sets the viewport width to be consistent with the device width
Initial-scale =1.0: Set viewport initialization scale to 1 (no scaling)
• Set viewports to not allow users to scale (most mobile web pages are not scalable)
Other Attributes
- Maximum-scale =5.0: Sets the viewport maximum scale to 5. This property is invalid if zooming is disabled
- M-scale =0.5: Sets the minimum viewport scale to 0.5
Tip: set viewport shortcut keys in vscodeMeta: vp + TAB key

Mobile layout note

1. The scroll bar cannot be displayed horizontally

B. The element width cannot exceed the viewport widthCopy the code

2. Use only the width (in percentage units) and a fixed height (px)

\* Percentage layout (flow layout) : Use percentage units for horizontal and a fixed height pxCopy the code

3. Box width cannot be affected by padding and margin (to avoid scrollbars)

\* Solution: box-sizing: border-box;Copy the code

Flow layout holy cup layout

A. The width of the “father” box is 100%, spread all over the screen, and box-sizing is box-border B. Set the left and right padding of the parent box to 60px c. The middle center subbox is 100% d. The left and right boxes are absolutely positioned

The mobile terminal is initialized

A. The mobile terminal needs to set all elements in the subtraction model (avoid padding and border resulting in scroll bar)
B. The font size on mobile devices is usually 12px
- The default is 16px on the PC
-webkit-tap-highlight-color: transparent; c. Select a TAB and click the background to have a blue highlight.

You cannot add pseudo-elements to a single label

Take the default value for the unwritten value

background

Background gradient

*/ /* background-image: linear-gradient(to right, red, green, blue); * /Copy the code

/* 角度的写法 */
            /* background-image: linear-gradient(45deg, red, green); * /
            /* background-image: linear-gradient(135deg, red, green); * /
Copy the code

The practice of colorful strips

.line {
            width: 1000px;
            height: 5px;
            /* border: 1px solid #000; */
            background: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, yellow 60%, yellow 80%, pink 80% );
        }


Copy the code

The three methods use a div to write three color blocks

A border

 .box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            border-left: 100px solid red;
            border-right: 100px solid green;
        }
Copy the code

Floating plus pseudo-elements

  .box2 {
            width: 300px;
            height: 100px;
            background-color: blue;
            margin-top: 100px;
        }
        .box2::before {
            content:' ';
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;

        }
        .box2::after {
            content:' ';
            float: right;
            width:100px;
            height: 100px;
            background-color: green;

        }
Copy the code

The gradient

  .box3 {
            width: 300px;
            height: 100px;
            background-image: linear-gradient(to right, red 33.3333%, blue 33.3333%, blue 66.6666%,  green 66.6666%);
            margin-top: 100px;
        }
Copy the code

Gradient progress bar

<div class="father">
        <div class="son"></div>
    </div>
Copy the code

.father {
            overflow: hidden;
            width: 1000px;
            height: 20px;
            background-color: #eee;
            margin: 100px auto;
            border-radius: 6px;
            box-shadow: inset 0 2px 2px 0 rgba(200.200.200.7);

        }
        .son {
            width: 50%;
            height: 20px;
            background-color: green;
            background-size: 40px 20px;
            background-image: linear-gradient(45deg,  transparent 33%.rgba(255.255.255.2) 33%.rgba(255.255.255.2)66%,transparent 66%);
    
        }
Copy the code

Control the background image size

background-size: 50% 20%;

/* Control the size of the background image cover background image scale, cover the box, the picture may display incomplete background image scale, the picture display complete, may not spread the box only write a value, represents the width, high scale, high default value is auto write 2 values, the first one represents the width, The second one is the width of the box. The second one is the width of the box. The second one is the height of the box

Elastic box

display:flex;

The spindle

Control the direction of the main axis

flex-direction: column; Row Default value Horizontal from left to right Row-reverse Horizontal reverse from right to left column spindle vertical downwards column-reverse The spindle vertical downwards bottom-up

Controls how children are aligned on the main axis the main axis is horizontal by default (from left to right)

justify-content: space-around; Flex-start default value Align at the beginning of the spindle Align left Flex-end Align at the end of the spindle Align right Align center center Align at the center of the spindle Align at the center of the horizontal center Align at the center of the spindle space-between The two sides are the middle half

Control spindle newline

flex-wrap: wrap; Children whose widths add up to the widths of their parent elements will not be newline by default and will be displayed on a single line without overflow

Axis lateral axis

Controls single – row lateral (vertical) alignment of child elements

align-items: center; The elastic box can better control the child elements in the parent element. The main axis is horizontal by default and the side axis is vertical by default

Stretch default: No height is set for the child element or set to Auto. The child element is stretched to the same height as the parent element. Flex-start align with the beginning of the side axis, top align with the end of the side axis flex-end Align with the bottom align with the center align with the vertical center

Align multiple lines of lateral axes (vertical)

When the height of a child element is not set, or when the height is set to auto, Stretch to a fraction of the parent flex-start align top align Flex-end align bottom align Center align vertical center space-between The two sides are the middle half

Subelement attribute

Child elements have fixed width 1Flex width =(parent element width – fixed width)/ child element total Flex

Align-self controls the vertical alignment of individual child elements

Stretch flex-start align with flex-end align with center align with center

The smaller the order value, the higher the order

Default :order: 2;

flex-flow

Is a composite of the Flex-direction and flex-wrap properties to set or retrieve the arrangement of child elements of the elastic box model object

Pay attention to

2. The child elements of an elastic box can still be used as an elastic box 3. The elastic box is not off-label. If the parent element does not set the height, the child element inside will push the height by 4. The parent element elastic box, the child elements in the box regardless of the display mode, can be set to width and height

Opacity: The value ranges from 0 to 1

Media queries

Value description all for all multimedia types of devices Print for printers Screen for computer screens, tablets, smartphones, etc.

conditions

@media(min-width: 769px) and (max-width: 992px) { body { background-color: blue; }}

From small to capital

    body {
            background-color: red;
        }
       @media(min-width: 768px) {
            body {
                background-color: blue; }}@media(min-width: 992px) {
            body {
                background-color: green; }}Copy the code

From top to bottom

 body {
            background-color: red;
        }

        @media(max-width: 1200px) {
            body {
                background-color: green; }}@media(max-width: 992px) {
            body {
                background-color: blue; }}Copy the code

Media queries import resources that call different CSS files for different screen sizes

 <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)"> stylesheet" href="style640.css" media="screen and (min-width: 640px)">
Copy the code

Less basis

Define variables

@ Variable name: value;

nested

1. The style of less nested child elements is written directly to the parent element 2. If we have pseudo class intersection selectors pseudo element selectors we’re going to add & inside

  a {
        text-decoration: none;
        &:hover {
          text-decoration: underline; }}Copy the code

Add operator

You must type a space on the left and right sides of the add operator to separate the two numbers to be operated on. If only one number has units, the final result will be in that unit. If both numbers have units and the units are different, the first unit will be used

rem

Em relative to its own font size if it does not refer to its parent element
Rem relative to the font size of an HTML element
The advantage of REM is that you can change the size of the elements in the page by changing the size of the text in the HTML

Rem adaptation scheme

1. Make some elements that cannot be equal-scale adaptive adapt to the current device proportionally when the size of the device changes
2. Use media query to set THE HTML font size in proportion according to different devices, and then use REM as the size unit of page elements. When the HTML font size changes, the element size will also change, so as to achieve the adaptation of proportional scaling
1. The final formula: REM value of page elements = page element value (px)/(screen width/number of partitions) 2. The screen width/number of partitions is the size of the HTML font size 3. Or; < span style = “box-sizing: border-box! Important; word-break: inherit! Important;

Rem adaptation scheme 2

Flexible. Js plus rem

Divide the equipment into 10 parts

Responsive layout

One layout for multiple screens

bootstrap

The core technology of Boostrap (the core technology of responsive layout)
- Divide the screen into different areas (row+ column) in the form of a table, and display different areas under different screens
Remember the classic size class name suffixes in Bootstrap
Lg: Large size, which corresponds to a large screen PC, which corresponds to >= 1200px in a raster system responsive layout
Md: medium size, which corresponds to large screen tablet, ipadPro and small screen PC. The screen in the raster system responsive layout is [992,1200]
Sm: Small size, corresponding to the tablet iPad, the corresponding screen in the raster system responsive layout is [768,992]
Xs: Ultra small size, corresponding to mobile phones, with a screen <= 768 in a raster system responsive layout

Bootstrap has two types of core containers for users to choose from

The container:Responsive type type core container
- Default style:
  - No height, no border, no color
  - 15 pixels left or right
- Width is responsive
  - Screen width < 768 Width 100%
  - 768 <= Screen width < 992 Width 750
  - 992 <= Screen width < 1200 Width 970
  - 1200 <= Screen width < 1200 Width 1170
The container – fluid:Flow centered container
- Default style:
  - No height, no border, no color
  - 15 pixels left or right
  - The width of the 100%

Default: default pure white link: link A Label Default color Success: Light green info: sky blue Warning: orange Danger: wine red Primary: cyan (important)

The components of a grid:

a.Type the core container(Equivalent to the container of the HTML page, equivalent to the table)
- b.row(Equivalent to the parent box model of HTML page, equivalent to tr in table)
  - c.col(Equivalent to subbox model of HTML page, equivalent to TR in table)

To hide the grid in a query interval, you can use the hidden style, which includes four styles: 1..hidden-XS hides the grid when the screen is less than 768. 2..hidden-SM hides the grid when the screen is greater than or equal to 768 but less than 992 Hides the grid when the screen is 1200 or greater

Summary of mobile layout

Mainstream solution 1. Independently make mobile terminal page, jingdong shopping mall mobile version, Taobao touch screen version, Suning Shopping mobile version 2. Responsive page compatible with mobile (second) Samsung mobile phone official website mobile technology selection

Flow layout (percentage layout)
Flex Flexible Layout (recommended)
Rem adaptive Layout (recommended)
Responsive layout
Select one of the main technologies and select other technologies to assist in this hybrid technology development

The 2 d transformation

transform

Convert the deformation

Mobile translate

/* transform: translate(x,y); /* transform: translate(x,y); transform: translateX(100px); Transform: translateY(100px); The percentage unit of translate is relative to its own element. Translate (50%,50%) has no effect on inline labels

Rotate the rotate

Transform: rotate(degree); The unit is deg when the Angle is positive, clockwise when negative, counterclockwise default rotation center point is the center point of the element
transform-origin: x y; By default, the center point of the transformation is the element’s center point (50%,50%). You can also set pixels for x and y, or top bottom left center (*/)
The transition is written to the person who made the transition

The zoom scale

transform: scale(x,y); Transform: scale(1,1); /* transform: scale(1,1); Transform: scale(2,2); transform: scale(2,2); Transform: scale(2); transform: scale(2); Scale (2,2) transform: scale(0.5,0.5); The maximum advantage of scaling can be set to transform the center point zoom by default to the center point and does not affect other boxes */

Integrated writing

Note: Multiple transformations are used at the same time. The format is transform:translate() rotate() scale(); The order will affect the effect of the transformation (rotation first will change the direction of the axes). When we have displacement and other attributes, remember to put displacement first so that we can rotate while displacement

3 d conversion

Depending almost small
- The X-axis is horizontal to the right, and the X-axis is horizontal to the right. The X-axis is horizontal to the right, and the X-axis is negative. The Y-axis is vertical to the down, and the Y-axis is positive
transform:translate3d(200px,200px,200px); Write attributes x, y, and z
The 3 d displacement translate3d (x, y, z)
- You can’t omit x and y and if you don’t, you write 0 and you usually use px units
- translatez(120deg); Bigger we see bigger objects
3d rotation: Rotate3D (x,y,z)
- Xy applies the left hand rule and the thumb is pointing in the positive direction of the axis and the z axis is positive clockwise
- Transform :rotatez(45deg) rotates 45deg in the positive direction of the Z axis
Perspective: the perspective
- perspective:800px; Stadia is the distance from the screen to the eye normally 600-1000px added to the parent element
3 d rendering transfrom – style
- Controls whether the child element turns on the 3D environment The flat child element is not turned on in 3D space by default The preserve-3D child opens the space The code is written to the parent, but affects the subboxes

animation

Animation is one of the disruptive features of CSS3. It can accurately control one or a group of animations by setting multiple nodes to achieve complex animation effects. Compared with transition animation, it can achieve more changes, more control and other effects such as continuous auto-play

The animation sequence

The rule of 0% start animation and 100% finish animation is the sequence of the animation
Specifying a CSS style in @keyFrames creates an animation that gradually changes from the current style to the new style
Animation is the effect of gradually changing an element from one style to another and you can change as many styles as you want as many times
Please specify when the change occurred as a percentage or use the keywords from and to to be equal to 0% and 100%

Define the animation@keyframesAnimation name {0% {
                width: 100px;
            }

            100% {
                width: 200px; }} You can make multiple state changes. The percentage of a keyframe is the percentage of an integerCopy the code

Call animation: animation-name: animation name duration: Animation-duration: duration animation-timing-function: speed curve default ease uniform speed Linear animation-delay: Animation start time default 0 Animation-iteration – Count The number of times an animation is played the default is 1 and infinite animation-direction specifies whether an animation is played backwards in the next period. The default is normal alternate Animation-play-state specifies whether the animation is running or paused. The default is running and paused. No animation-play-state is included in the shorthand properties Backwards animation-timing: The default speed curve of the specified animation is Ease animation starts at a low speed and then speeds up and slows down before the end. Ease-in starts at a low speed Ease-out Starts and ends at low speed Steps () specifies the number of intervals in the time function (step size)

Animation properties The animation name and time are mandatory and the others are not default time The animation name duration the motion time When the play starts The number of times the animation starts or ends the animation in the opposite direction name duration timing-function delay iteration-count direction fill-mode; Our element can add multiple animations separated by commas for example animation:bear 1s steps(8) infinite,move 1s forward;

The transition

Those attributes need to be transitioned: transition-property:background;
Transition duration:1s;
Uniform transition – timing – function: linear;
Transition delay:1s;
When concatenating a transition property, the transition time is mandatory and the default value is used for other attributes that are not written
- transition:border-radius 1s, margin-left 1s;

Make head and bottom suspension

The first method is elastic box

.con {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  .header {
    height: 46rem / 37.5;
    width: 100%;
  }
  .center {
    flex: 1;
    overflow-y: auto;
  }
  .footer {
    height: 50rem / 37.5;
    width: 100%; }}Copy the code

The second method is fixed positioning

.con {
.header {
  position: fixed;
  width: 100%;
  height: 46rem / 37.5;
  top: 0;
  max-width: 750px;
  // left: 0;
  background-color: #fff;
}
.center {
  padding: 46rem / 37.5 0 50rem / 37.5;
  height: 100%;
}
.footer {
  position: fixed;
  bottom: 0;
  // left: 0;
  max-width: 750px;
  height: 50rem / 37.5;
  width: 100%;
  background-color: #fff; }}Copy the code

Summary of basic knowledge of mobile Web