Some Problems:

Can the page layout text change as the screen size changes?
Flow layout and flex layout are mainly for width layout, so how to set the height
How to make the height and width of the element scale proportionally when the screen changes

1 rem base

rem(root em) is a unit, similar to em. the difference:

em is relative to the font size of the parent element
rem The base is relative to the font size of the html element
For example, if the root element (html) sets font-size=12px; if the non-root element sets width:2rem; then replace it with px to indicate 24px

The advantage of rem: the text size of the parent element may be inconsistent, but the entire page has only one html, which can well control the element size of the entire page

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            font-size: 12px;
        }

        div {
            font-size: 10px;
            width: 15rem;
            height: 15rem;
            background-color: purple;
        }

        p {
            /* 1. em相对于父元素 的字体大小来说的 */
            width: 10em;
            height: 10em;
            /* 2. rem 相对于 html元素 字体大小来说的 */
            /* width: 10rem;
            height: 10rem; */
            background-color: pink;
            /* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>

</body>

2 Media Queries

2.1 Definition

Media query (Media Query) is a new syntax of CSS3

Using @media queries, different styles can be defined for different media types
@media Different styles can be set for different screen sizes
When you reset the browser size, the page will also re-render the page according to the browser's width and height
At present, media queries are used for many Apple mobile phones, Android mobile phones, tablets and other devices

2.2 Grammar specification

@media mediatype and|not|only (media feature) {
    CSS3-Code;
}

@media starts with
mediatype is the media type
keywords and, not,only
media feature Media properties, must have parentheses

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
        /* max-width 小于等于800 */
        /* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
        
        @media screen and (max-width: 800px) {
            body {
                background-color: pink;
            }
        }
        
        @media screen and (max-width: 500px) {
            body {
                background-color: purple;
            }
        }
    </style>
</head>

The above code means that the page on our screen is between 500px-800px, and the background color of the page is displayed as pink. The page is smaller than 500px, and the background color is displayed as purple

2.3 mediatype query type

Divide different terminal devices into different types, called media types

value	explain
`all`	for all devices
`print`	For printers and print browsers
`screen`	For computer screens, tablets, smartphones, etc.

2.4 Keywords `and not only`

Keywords concatenate media type attributes together as conditions for media queries

and: You can connect multiple types or multiple media types together to become the condition of a media query
not: Exclude a certain media type, which is equivalent to "non" and can be omitted
only: Specify a specific media type, which can be omitted

2.5 Media Features

Each media type has its own specific characteristics, and different display styles are set according to the media characteristics of different media types. Let's know about three for the time being, and note that they need to be included in parentheses

value	explain
`width`	Defines the width of the visible area of the page in the output device
`min-width`	Defines the minimum visible area width of the page in the output device
`max-width`	Defines the maximum visible area width of the page in the output device

The value of media queries: Media queries can change different styles according to different screen sizes

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
        /* 2. 小于540px 页面的背景颜色变为蓝色 */
        
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        /* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
        /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        } */
        
        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }
        /* 4. 大于等于970 我们页面的颜色改为 红色 */
        
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
        /* 5. screen 还有 and 必须带上不能省略的 */
        /* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略的 */
    </style>
</head>

2.6 Media query + rem to realize dynamic size change of elements

rem Units come html and go, with rem page elements you can set different sizes
Media queries can modify styles according to different device widths
Media query + rem can realize different device widths and realize dynamic changes in the size of page elements

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* html {
            font-size: 100px;
        } */
        /* 从小到大的顺序 */
        
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
        
        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>
<body>
    <div class="top">购物车</div>
</body>

The above code means: the screen size is less than 320px, the div size is 0.5*50 = 25px, the screen size is greater than 320px and less than 640px, the div size is 0.5 * 100 = 50px

2.7 Importing resources

When there are many styles, we can use different stylesheets (style sheets) for different media
The principle is to directly judge the size of the device in the link, and then refer to different css files

/* 当屏幕大于 640px，一行显示两个 */
/* 小于 640px 的，一行显示一个 */
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

Importing resources is to call different css files for different screen sizes

3 LessBasics

CSS is a non-procedural language, without variables, functions, SCOPE (scope) and other concepts.

CSS needs to write a lot of seemingly illogical code, CSS redundancy is relatively high
Inconvenient maintenance and expansion, not conducive to reuse
CSS doesn't have good computing power
For non-front-end development engineers, it is often difficult to write well-organized and easy-to-maintain CSS code projects due to lack of CSS writing experience

3.1 Introduction to less

Less (abbreviation for Leaner Style Sheets) is a CSS extension language, also known as CSS preprocessor
As a form of extension of CSS, it does not reduce the functions of CSS, but adds procedural language features to CSS based on the existing CSS syntax
Based on the syntax of CSS, it introduces functions such as variables, Mixin (mixed in), operations, and functions, which greatly simplifies the writing of CSS and reduces the maintenance cost of CSS

Less Chinese URL: http://lesscss.cn
Common CSS preprocessors: Sass, Less, Stylus

Essence: Less is a CSS preprocessing language that extends the dynamic features of CSS.

3.2 use of less

We first create a new file with the suffix less, and write the less statement in this less file. Learning at this stage:

Less variable
Less compile
Less nesting
Less operation

less variable

Variable means that there is no fixed value, some colors and values in CSS are often used

@变量名:值;

example

// 定义一个粉色变量
@color: pink;
@font14: 14px;
body {
    background-color: @color;
}
div {
    background-color: @color;
    font-size: @font14;
}

Variable naming convention:

must have @ prefix
cannot contain special characters
Cannot start with a number (remove the prefix @ part)
Case Sensitive

compile less

Essentially, Less includes a set of custom grammars and a parser. Users define their own style rules based on these grammars. These rules will eventually be compiled and generated by the parser to generate corresponding CSS files.

Therefore, we need to compile our less file into a css file so that our html page can be used

In VS Code, use the Easy Less plug-in to compile and generate CSS files in real time, and then import them

less nesting

Similar to the nesting between html elements, selectors can also be nested in Less

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

To write pseudo-classes, intersection selectors, and pseudo-element selectors in less, add & in front of the inner selector

If there is no preceding inner selector &, it is parsed as a descendant of the parent selector;
If present &, it is resolved to the parent element itself or a pseudo-class of the parent element

a:hover {
    color: red;
}

Less nested writing:

a {
    &:hover {
        color: red;
    }
}

less operation

Any number, color or variable can participate in the operation, and Less provides addition ( +), subtraction ( -), multiplication ( *), and division ( /) arithmetic operations

@width: 10px + 5;
div {
    border: @width solid red;
}

/* 生成的css */
div {
    border: 15px solid red;
}

/* Less甚至还可以这样 */
width: (@width + 5) * 2;

For division operations, parentheses are required
There must be spaces on the left and right sides of the operator
If only one of the operands has a unit, the final result will be in this unit
If there are multiple units, the first unit shall prevail

4 rem adaptation scheme

Let some elements that cannot be proportionally adaptive be adapted to the current device proportionally when the size of the device changes
Use media queries to set the font size of html proportionally according to different devices, and then use rem as the size unit for page elements. When the font size of html changes, the element size will also change, so as to achieve the adaptation of proportional scaling

Actual development adaptation scheme

According to the ratio of the design draft to the device width, dynamically calculate and set the font-size of the html root tag; (media query)
In CSS, the width, height, relative position and other values of the elements of the design draft are converted into values in rem units according to the same ratio

Technical solution 1

Common device sizes:

equipment	common width
iphone45	640px
iphone678	750px
Android	Common 320px, 360px, 375px, 384px, 400px, 720px. 720px for most 4.7~5 inch Android devices

Dynamically set the font-size of html tags

Suppose the design draft is 750px
Suppose we divide the entire screen into 15 equal parts (different division standards can be 20 or 10 equal parts)
Each copy is used as the html font size, here is 50px
Then on a 320px device, the font size is 320/15 which is 21.33px
Dividing the size of our page elements by the different html font sizes will reveal that their proportions are still the same
For example, we use 750 as the standard design draft
A 100*100 pixel page element is 100 / 50 under the 750 screen, converted to rem is 2rem * 2 rem, the ratio is 1 to 1
Under the 320 screen, the html font size is 21.33, then 2rem = 42.66px, the width and height are both 42.66 at this time, but the ratio of width to height is still 1:1
However, it has been able to achieve the effect of proportional scaling of page element boxes under different screens

Element Size Value Method

First choose a set of standard sizes, such as 750
Divide the screen size by the number of divisions to get the text size in html. At this point we know that the text sizes obtained under different screens are different.
The rem value of the page element = the px value of the page element at 750 pixels / the text size in html

[HTML+CSS] rem layout of mobile WEB development

1 rem base

2 Media Queries

2.1 Definition

2.2 Grammar specification

2.3 mediatype query type

2.4 Keywords `and not only`

2.5 Media Features

2.6 Media query + rem to realize dynamic size change of elements

2.7 Importing resources

3 LessBasics

3.1 Introduction to less

3.2 use of less

4 rem adaptation scheme

Guess you like

[HTML+CSS] rem layout of mobile WEB development

1 rem base

2 Media Queries

2.1 Definition

2.2 Grammar specification

2.3 mediatype query type

2.4 Keywords and not only

2.5 Media Features

2.6 Media query + rem to realize dynamic size change of elements

2.7 Importing resources

3 LessBasics

3.1 Introduction to less

3.2 use of less

4 rem adaptation scheme

Guess you like

2.4 Keywords `and not only`