Rem unit

  • Rem (root EM) is a relative unit, similar to EM, which is the font size of the parent element
  • Em is different from REM
  • Rem is based on the font size relative to the < HTML > element for example: the root element HTML setting font size=12px; Width: 2rem; Converting to PX means 24px
  • Rem’s advantage: The parent element text size may be inconsistent, but the entire page has only one < HTML >, which is a good way to control the element size ratio of the entire page.

Media queries

  • Media Query is a new CSS3 syntax

    • 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

  • Grammar specification

    1. @ media at the beginning
    2. Mediatype mediatype
    • Different terminal devices are divided into different media types, as shown in the following table:
      value explain
      all All the equipment
      print Printer and print preview
      screen Computer screens, tablets, smartphones, etc
    1. Keyword and not or only
    • Meaning: Concatenates media types or multiple media features as the condition for a media query.
      1. And: multiple media features can be joined together, equivalent to and
      2. Not: Excludes a media type. It is equivalent to “not” and can be omitted
      3. Or: Can test multiple media query conditions, as long as one condition is true, “or” meaning
      4. Only: specifies a specific media type, which can be omitted

    1. Media feature The media feature must be wrapped in parentheses as shown in the following table:

      value explain
      width The width of the page visible area on the output device
      min-width The minimum visible area width of a page on an output device
      max-width Maximum visible area width of a page on an output device

      For example:

      <! -- < span style = "max-width: 100%; clear: both; min-height: 1em;@media screen and (min-width: 600px;) {<! The internal style is the same as writing CSS styles.body {
            background-color: pink; }}Copy the code

  • Example: Change background color depending on page width

    • Implementation idea:
      1. Recommendation: From small to big
      2. Note: both max-width and min-width contain equal to
      3. Screen smaller than 540 pixels, background color blue (x<=539)
      4. The background color is green for screens greater than or equal to 540 pixels and less than or equal to 969 pixels (540 =< x >= 969)
      5. The background color is red for screens greater than or equal to 970 pixels (x >= 970)

  • Summary: each attribute must be blank, such as: and after the space, otherwise the style will not come out

  • Media queries and REM implement element changes

    • Rem units follow < HTML >, and with REM page elements you can set different sizes
    • Media queries can be styled for different device widths
    • Media query + REM can achieve different device width, dynamic change of page element size
    • case

  • Introducing resources (understanding)

    • Determine the size of the device in <link> and then refer to different CSS files for example: 
         <link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">
Copy the code

Less basis

  • Disadvantages of maintaining CSS
    • CSS is a non-procedural language without concepts such as variables, functions, and scopes
      1. CSS requires a large amount of seemingly illogical code to be written, and CSS redundancy is relatively high.
      2. Not convenient maintenance and expansion, not conducive to reuse
      3. CSS does not have great computing power
      4. For non-front-end developers, it is often difficult to write well-organized and maintainable CSS code projects because of their lack of CSS writing experience
  • Less is introduced
    • Less(Leaner Style Sheets) is a CSS extension language that is also known as the CSS preprocessor
    • As a form of CSS extension, it does not reduce the functionality of CSS, but adds procedural language features to the existing CSS syntax
    • On the basis of the syntax of CSS, variables,Mixin, operations and functions are introduced, which greatly simplifies the writing of CSS. It also lowers CSS maintenance costs, and as its name suggests,Less allows us to do more with Less code
    • Chinese website: >lesscss.cn/
    • Common CSS preprocessors: Sass,Less,Stylus
    • Summary :Less is a CSS preprocessor language that extends the dynamic features of CSS
  • Less installation
    • steps
      1. Install nodejs > nodejs.org/en/download…
      2. Check whether the installation is successful
        • Run CMD (Widows +r) and enter “node-v” to view the version
      3. Run the CMD “NPM install -g Less” command to install Less online based on Node. js
      4. Run the lessc-v command to check whether the installation is successful
  • Less use of

    • Less variables (colors and values commonly used in CSS, etc.)

      1. @ Variable name: value
      2. Naming conventions
        • Must be prefixed with @
        • Contains no special characters
        • You can’t start with a number
        • Case sensitivity
      3. Specification for variable use
        body {
    color: @color;
  }
  a:hover {
    color: @color;
  }
Copy the code

    • Less compilation

      • Essentially,Less consists of a custom syntax and a parser that allows users to define their own style rules, which are compiled into corresponding CSS files by the parser.
      • The.less file must be compiled into a.css file before the HTML page can be used
      • Use the command “lessc style.less > style.css” in the current folder as shown in the following figure:
      • If you save the Less file, the CSS file will be automatically generated

    • Less nested

      • Common nesting 
        <! -- Common selectors -->#header .logo {
    width: 300px; } <! < span style = "max-width: 100%; clear: both; min-height: 1em;#header {
    .logo {
      width: 300px; }}Copy the code
      • Intersection/pseudo-class/pseudo-element selector
        1. If the inner selector is not preceded by an ampersand, it is resolved to be a descendant of the parent selector
        2. If there is an ampersand, it is resolved to the parent element itself or to a pseudo-class of the parent element.

        Such as:

        <! -- Common selectors -->a:hover {
       color: red; } <! < span style = "max-width: 100%; clear: both; min-height: 1em;a{&:hover {
         color: red; }}Copy the code

    • Less operation

      • Meaning: Any number/color or variable can be used in the operation. Less provides arithmetic operations of addition (+), subtraction (-), multiplication (*), and division (/)
      • Note:
        1. For an operation between two values of different units, the resulting value takes the units of the first value.
        2. If only one value between two values has a unit, the result of the operation takes that unit
        3. The operator is separated by a space to the left and right of 1px + 5rem

Rem adaptation scheme

  • Think about:

    1. What is the purpose of our adaptation? A: Make some elements that are not equally adaptive, so that when the device size changes, they are equally adaptive to the current device.

    2. How will it be used in real development? A: Use media query to set the HTML font size proportionally for different devices, and then use REM as the size unit for page elements. When the HTML font size changes, the element size will also change, so as to achieve proportional scaling adaptation.

  • Rem actually develops adaptation solutions

    1. Dynamically calculate and set the font size of the HTML root tag according to the ratio of the design draft to the width of the device. (Media Enquiries)
    2. In the CSS, the width, height, and relative position of design elements are converted to rem in the same proportion

  • Use of REM adaptation technology (mainstream market)

    1. Technical Solution 1

      • less
      • Media queries
      • rem

    2. Technical Solution 2

      • flexible.js
      • rem

  • Conclusion: Scheme 2 is simpler, so you don’t need to know the JS code at this stage

  • Rem + media query +less technology

    1. Common dimensions and widths of design draft (as shown below)In general, we fit most screens with one or two sets of renderings, giving up extreme screens or downgrading them gracefully, sacrificing some effects.750 is now the standard.

    2. Dynamically set the FONT size of the HTML tag (750 as an example), as shown in the figure

    3. Element size method

    * Final formula: The rem value of the page element = the page element value (px)/(screen width/partition number) * screen width/partition number is the HTML font size * or the REM value of the page element = the page element value (px)/HTML font sizeCopy the code

Independently completed suning mobile terminal home page

  • Give the A tag a location and overlay it on top of the search box
  • Float \display\position\ three position method