First, mobile web development foundation

1. The viewport

In order to make the website have the most ideal browsing and reading width on mobile terminal, set the Ideal Viewport.

You need to manually add the viewport label to inform the browser of the operation

< meta > Viewport tags:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, Minimum - scale = 1.0 > "< / meta >

The above vscode can be generated automatically.

attribute explain
width Width is the width of the viewport, and you can set device-width to a special value.
user-scalable Whether the user can zoom, yes/no (1/0)
Initial-scale Initial scaling ratio, 1.0 means no scaling
maximun-scale Maximum scaling ratio
minimum-scale Minimum scaling ratio

2. 2 times

Problem: If a 50 × 50 px image is placed on a phone screen, it will occupy 100 × 100 physical pixels, causing the image to blur

Solution: Create an image that is 100 by 100 px, replace the original image, and set the image size to 50 by 50 px, same as the background image.

For the background image:

.box {

background-size: 50px 50px;

}

3. Solutions to common problems on mobile terminals

(1) Browser

Since mobile browsers are based on webKit kernel, we need to consider webKit compatibility. We can rest assured to use H5 tag and CSS3 style, and the private prefix of the browser only needs to consider adding -webkit-

(2) CSS initialization style

It is recommended to use normalize. CSS instead of reset.css to initialize the CSS on mobile devices. Is a customizable CSS file that allows different browsers to render web elements in a more uniform manner. Resolved browser inconsistent default styles.

Website directly download address: necolas. Making. IO/normalize. C…

(3) CSS3 box sizing

Conventional width calculation: width =width+border+padding

box-sizing: content-box;

CSS3 box model: Width contains border and padding, the overall width and height of the box is fixed, adding border and padding will not enlarge the box;

Add attribute: box-sizing: border-box;

(4) Special styles (copy to CSS)

Clear click highlight style: Set to Transparent for transparency (can be set in wildcard properties)

* {-webkit-tap-highlight-color: transparent; }

Buttons and input fields on ios mobile browsers have a default appearance. How to customize:

input {-webkit-appearance: none; }

Disable the popup menu when long pressing the page (image and A TAB) :

img,a {-webkit-touch-callout: none; }

Second, flow layout

Definition 1.

Percentage layout.

By setting the width of the box as a percentage to scale according to the width of the screen, content is filled to the side without being limited by fixed pixels.

2. Precautions

You need to define the maximum and minimum supported widths for the page

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

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

3. Jd Mobile Terminal project

Mobile website: m.jd.com

(1) Search box layout

Create an effect where the width of the search box changes but the width of the left and right small boxes is fixed: the parent box is positioned relative to each other, the left and right small boxes are positioned absolutely, and the middle box does not have to be set width in the standard stream

(2) Double diagram – wizard diagram production

Scale the Sprite map to half its original size, and then read the size of the corresponding position

Websites for querying CSS properties:developer.mozilla.org/zh-CN/

Flex layout

Flex layout experience

  • Easy to operate, simple layout, wide application on mobile terminal
  • PC browser support is poor
  • Not supported or only partially supported by IE 11 or later

Advice:

  1. The PC side uses the traditional layout
  1. Mobile can use Flex layout without considering compatibility

2. Flex layout principles

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 will be invalidated.

The parent box is a Flex container, and the child elements are Flex items, which can be arranged horizontally or vertically.

3. Common properties of the Flex layout parent

  • Flex-direction: sets the spindle direction

    Note: The main axis can be either x or y

    Attribute values explain
    row Default values are left to right
    row-reverse From right to left
    column Top to bottom (set y axis as main axis)
    column-reverse From the bottom up

  • Context-content: Sets the arrangement of child elements on the main axis

    Note: The main axis must be determined before using this property

    Attribute values explain
    flex-start The default value starts at the head, left to right if the main axis is X-axis (equivalent to the left element)
    flex-end Order from the tail (equivalent to elements to the right)
    center Align in the center of the spindle (horizontally centered if the spindle is X-axis
    space-around Bisecting remaining space
    space-between First edge both sides and then divide the remaining space equally (important)

  • Flex-wrap: Sets whether a child element is wrapped on a line

    Flex layouts do not have line breaks by default and all items are lined up

    Attribute values explain
    nowrap Default no newline element width is limited by the parent box width
    wrap A newline

  • Align-content: Sets the arrangement of children on the side axis (multiple lines)

    It doesn’t work on a single line. Flex-wrap: wrap is required

    Attribute values explain
    flex-start From top to bottom
    flex-end From the bottom up
    center Crowded together center (vertical center)
    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 (multiple lines) to divide the height of the parent element (when no height is set)

  • Align-item: Sets the alignment of children on the side axis (default y axis) (single line)

    This subitem is used when it is a single item (single row).

    Attribute values explain
    flex-start Defaults from top to bottom
    flex-end From the bottom up
    center Crowded together center (vertical center)
    stretch The tensile

  • Flex-flow: compound property, equivalent to setting both flex-direction and flex-wrap

Eg: flex-flow: row wrap;

4. Common properties of Flex layout subitems

  • Flex properties (Important)

    Define the remaining space allocated by the child element to the parent box, using Flex to indicate how many shares

    The value of the property is a number. The number is 1, indicating one of the total shares. The default value is 0

    flex: <number>

  • Align-self controls how the children align themselves on the side axis

    Allows individual items to have different alignments than other items, overriding the align-item attribute

    The default value is auto, which inherits the align-item of the parent element. If there is no parent element, it is equivalent to stretch

    span:nth-child(2) {align-self: flex-end; }

  • Order attribute

    Define the order of items, the smaller the number, the higher the order

    order: <number>

5. Common Flex layout ideas

Rem layout

1. The rem unit

Rem (root EM) is a relative unit, similar to EM. Em refers to a multiple of the size of the parent element.

The difference is that REM is the font size relative to the HTML element, which is twice the font size of the root element.

Font-size =12px; Set width=2rem for non-root elements; Converting to PX means 24px.

Rem advantage: The reference element is HTML, and there is only one HTML element per page for overall control.

2. Media query

Media query is a new syntax for CSS3:

  • @media can define different styles for different media types
  • @Media can set different styles for different screen sizes
  • As you resize the browser, the page is also rerendered according to the width and height of the browser
  • At present, media queries are used for many Apple, Android phones, tablets and other devices

(1) Grammatical norms

@meida mediatype and|not|only (media feature) {Css-code; }

Begins with the @ media

  • Meidatype Media type
value explain
all For all equipment
print For printers and print previews
screen Used for computer, tablet, mobile phone screen
  • Keyword and not only
value explain
and Multiple media features can be linked together “and”
not Exclude a media type from “not”
or You can test multiple media queries for one condition, execute if one condition is true, “or”
only Specify a specific media type
  • Media feature The media feature must be contained in parentheses
value explain
width Defines the width of the visible area of the page in the output device
min-width Defines the width of the minimum visible area of the page in the output device
max-width Defines the width of the maximum visible area of the page in the output device

Once the media query criteria are met, the CSS code inside is executed.

Media queries can be written multiple times.

(2) Introducing resources

When there are many styles, different stylesheets can be used for different media.

  • Grammar specification

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

3. Less

(1) Introduction and installation

Address: lesscss. Cn

Less is a CSS preprocessor language that extends the dynamic nature of CSS.

  • Install: download nodeJS from the official website and open the installation: nodejs.org/en/download…

  • Check whether the installation is successful on the terminal

    Check whether the node is successfully installed: node -v Check the NPM version: NPM -v

    • Open the terminal and install less

      Enter the sudo NPM install less-g command

      After the installation is successful, run lessc -v to check whether the installation is successful

(2) Less variable

A variable is one that has no fixed value and can change dynamically. Some colors and values in the CSS are often used.

@ Variable name: value;

  • Variable naming conventions:

    1. Must have the @ prefix. 2. Cannot contain special characters. 3. Case sensitivity

    For example: @color: deeppink;

    @fs14: 14px;

  • Variable used

    div { background-color: @color; }

(3) Less compilation

We need to compile.less files into.css files so that the HTML pages can use them.

  • Method (nodejs) : Right-click the folder where the file is located and create a terminal TAB located in the folder location

Run lessc filenames. Less > filenames. CSS Press Enter to view the compiled

You need to compile again after each change to the.less file

  • Method 2 (VScode Less plug-in) : Easy Less

    As long as you save the LESS file, the CSS file will be automatically generated, save and compile at any time

In HTML, CSS files are introduced.

(4) Less nesting

  • CSS writing:

    #header .logo {width:300px; };

  • Less nested:

#header {
    .logo {
            width:300px; }}Copy the code

  • If you encounter an intersection, pseudo-class, or pseudo-element selector, use &*

    An inner selector without an ampersand is resolved as a descendant of the parent selector;

    If there is an ampersand, it is resolved to the parent element itself or to a pseudo-class of the parent element

(5) Less computation

Any number, color, or variable can be used. Plus + minus – times * divide /4 arithmetic operations.

1. Two numbers can have one unit and one no unit, and the final unit is a unique unit

2. Both numbers have units, and the final unit is the unit of the first number

3. Spaces must be added around the less operator

4. Parentheses are needed for division ()

4. Rem adaptation principle

(1) Method 1: Media query

  • Make some elements that cannot be equally proportional adaptive, so that when the device size changes, equally proportional to the current device.

  • Media query is used to set the HTML font size proportionally according to different devices, and then REM is used as the size unit for page elements. When the HTML font size changes, the element size will also change, so as to achieve the adaptation of proportional scaling.

    See common.less for details

(2) Flexible. Js (recommended)

How it works: Divide the device into 10 equal parts. If the current design is 750px, just set the HTML text size to 75px (750/10). Let flexible.js calculate the rest.

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

Need to introduce:

You can solve the problem of device size change without media query.

  • Change the flexible. Js default size to use! Important cascade.

    @media screen and (min-width:750px){

    html {

    font-size: 75px ! important;

    }

    }

  • Cssrem plug-in

    In the extension Settings of the plug-in, change the Root Font Size to the HTML text Size of the design draft, which can be automatically converted to REM when entering the PX value, simplifying the work.

5. Responsive layout

1. Principle of responsive development

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

2. Responsive layout containers

Reactive requires a parent as a layout container to coordinate with the child elements to achieve the change effect.

The principle is to change the size of the layout container through media query under different screens, so as to change the arrangement and size of child elements, and realize different page layouts and styles under different screens.

  • Responsive size division

    Ultra-small screen (mobile phone, less than 768px) : Set width to 100%;

    Small screen (tablet, greater than or equal to 768px) : Set the width to 750px.

    Medium screen (desktop monitor, >=992px) : Set width to 970px;

    Large screen (large desktop monitor, >=1200px) : set width to 1170px;

    You can also customize the partition based on the actual situation.

3. Bootstrap

(1) introduction

By far the most popular front-end framework. A set of more complete web function solutions, prefabricated style library, components, plug-ins. Consumers need to develop according to some specification specified by the framework.

Chinese official website: www.bootcss.com/

(2) use

  1. Create folder structure

    Project folders: Bootstrap, CSS, images

    Bootstrap: CSS, fonts, js

  2. Create the HTML skeleton structure

<! doctypehtml>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <! The above 3 meta tags must come first, and everything else must come after them! -->
    <title>Bootstrap 101 Template</title>

    <! -- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <! HTML5 shim and responder.js are designed to allow IE8 to support HTML5 elements and media queries -->
    <! -- warning: responder.js does not work when accessing a page using the file:// protocol (that is, dragging and dropping HTML pages directly into the browser) -->
    <! --[if lt IE 9]> <! -- Solve the problem that IE9 does not recognize new html5 tags and causes CSS to fail -->	
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
    <! Css3 Media Query not recognized by IE9 -->
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script><! [endif]--></head>
  <body>
    <h1>Hello world!</h1>

    <! -- jQuery (all JavaScript plug-ins for Bootstrap rely on jQuery and must be placed first) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <! Load all JavaScript plugins for Bootstrap. You can also load individual plug-ins as needed. -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>
Copy the code

  1. Introduce related style files

  2. Writing content

    To modify the original bootstrap style, pay attention to the weight problem. Check the source code on the web page to find out which selector is used for the style. For example, add another class name (do not change the original class name), and then add the style.

    Try not to change the styles defined by Bootstrap, but become familiar with the styles and effects defined by bootstrap.

(3) Bootstrap layout container

  1. Container class: A responsive layout container with a fixed width.

    • Large screen (>=1200px) : set width to 1170px
    • Center screen (>=992px) : Set the width to 970px
    • Small screen (>=768px) : Set the width to 750px
    • Ultra-small screen: 100%

    <div class="container"></div>

  2. Container-fluid: a container with a streaming layout, 100% width. Is a container that occupies all viewports, suitable for mobile page development.

    <div class="container-fluid"></div>

(4) Grid system

1. Introduction

Ultra small screen (mobile phone) <768px Small screen (tablet) >=768px Center screen (desktop monitor) >=992px Widescreen devices (large desktop displays) >=1200px
. Maximum width of container Automatic (100%) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
The number of columns (column) 12 12 12 12
  • Row creates a set of columns horizontally.
  • Divide the screen into 12 equal parts.
  • Each column defaults to about 15px padding
  • You can specify a column as the class name of multiple devices to divide the number of partitions. For example, class = “col-MD-4 col-SM-6”. Each element on a medium screen has four columns and each element on a small screen has six columns.

2. List of nested

To subdivide a column into smaller columns, add a. Row element and a series of. Col-sm -* elements to an existing. Col-sm -* element.

<div class="container"> <div class="row"> <! Nested - a new grid system -- -- > < div class = "col - lg - 4 row" > < p class = "col - lg - 6" > 1 < / p > < p class = "col - lg - 6" > 2 < / p > < / div > < div class="col-lg-4">2</div> <div class="col-lg-4">3</div> </div> </div>Copy the code

3. The column offset

<div class="col-lg-4 col-lg-offset-4">

Columns can be offset to the right using the. Col-md-offset -* class. * is the number of copies, which is equivalent to setting the left margin for the element.

4. The column sorting

. Col – md – push – * right on

The col – md – pull – * to zola

Implement left element right push, right element left pull, implement column reorder.

5. Responsive tools

Hidden. Hidden -xs. Hidden -sm. Hidden – MD. Hidden – LG refers to elements hidden in ultra-small screen, small screen, medium screen and large screen respectively.

.visible-xs. Visible-sm. visible-md.. visible-LG allows elements to be displayed on ultra-small, small, medium, and large screens respectively, while other screens are hidden.

conclusion

Suggestion: when making web pages, select a main technology selection, other technologies as auxiliary, mixed technology development.