移动端布局之less+rem+媒体查询

rem与em

rem相对单位，取决于html字体大小。而em也是相对单位，取决于父元素的字体大小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            font-size: 16px;
        }
        
        .box {
            width: 10rem;
            height: 10rem;
            margin: auto;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="box">
    </div>
</body>

</html>

在这里插入图片描述

媒体查询

媒体查询（Media Query）是CSS3新语法。

作用：针对不同的屏幕设置不同的样式

媒体查询语法规范

用 @media开头注意@符号
mediatype:媒体类型
关键字 and not only
media feature 媒体特性必须有小括号

语法

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

媒体类型

将不同的终端设备划分成不同的类型，被称为媒体类型。

在这里插入图片描述

关键字

关键字将媒体类型与媒体特性连接起来作为媒体查询的条件

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

媒体特性

每种媒体类型具有不同的特性

在这里插入图片描述

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body区域在600以下背景为yellow*/
        
        @media screen and (max-width: 600px) {
            body {
                background-color: yellow;
            }
        }
    </style>
</head>

<body>

</body>

</html>

在这里插入图片描述

媒体查询之案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 小于540px 背景颜色为蓝色 */
        
        @media screen and (max-width:539px) {
            body {
                background-color: blue;
            }
        }
        /* 大于540px且小于等于969px的时候，背景颜色为绿色*/
        
        @media screen and (min-width:540px) {
            body {
                background-color: green;
            }
        }
        /* 大于970px背景颜色为红色*/
        
        @media screen and (min-width:970px) {
            body {
                background-color: red;
                
            }
        }
    </style>
</head>

<body>

</body>

</html>

在这里插入图片描述

媒体查询+rem实现元素的动态变化


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 最小屏幕尺寸为320px时  html的字体为50px */
        
        @media screen and (min-width:320px) {
            html {
                font-size: 50px;
            }
        }
        /* 最小屏幕尺寸为640px时  html的字体为100px */
        
        @media screen and (min-width:640px) {
            html {
                font-size: 100px;
            }
        }
        
        .header {
            color: red;
            font: bold normal 0.5rem normal;
            text-align: center;
            line-height: 1rem;
            background-color: blanchedalmond;
        }
    </style>
</head>

<body>
    <div class="header">header</div>
</body>

</html>

在这里插入图片描述

媒体查询之引入资源

书写多个不同屏幕尺寸下的样式，针对于不同的屏幕尺寸，调用不同的样式

style320

div {
    width: 100%;
    height: 50px;
}

div:nth-of-type(1) {
    background-color: red;
}

div:nth-of-type(2) {
    background-color: blue;
}

style640


div {
    float: left;
    width: 50%;
    height: 25px;
}

div:nth-of-type(1) {
    background-color: red;
}

div:nth-of-type(2) {
    background-color: purple;
}

index

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>引入资源</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <!-- min-width:320px -->
    <link rel="stylesheet" href="./style320.css" media="screen and (min-width:320px)">
    <!-- min-width:640px -->
    <link rel="stylesheet" href="./style640.css" media="screen and (min-width:640px)">
</head>

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

</html>

在这里插入图片描述

媒体查询总结

媒体查询是按照从小到大的顺序来写
媒体查询是由媒体类型关键字媒体特性组成
媒体特性要加小括号

css的缺点

书写大量无逻辑的代码，css冗余度是比较高的。
处理起来比较艰难
没有计算的能力

less

less是css的预处理语言它拓展css动态特性它在css语法基础上扩展一些功能，引进变量函数使css有计算能力

如何安装less

①安装nodejs，可选择版本(14.7.0)，网址：nodejs.cn/download/

②检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） —输入“node –v”查看版本即可

③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可

④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

注意：vscode想要编译less 必须要使用Easy LESS插件只要保存一下Less文件，会自动生成CSS文件。

注意：vscode想要编译less 必须要使用Easy LESS插件只要保存一下Less文件，会自动生成CSS文件。

less变量

@变量名:值;

注意事项

必须@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

less文件


@color:purple;
@font:20px;
@baseline:50px;
html {
    font-size: @baseline;
}
.box {
    color: @color;
    font-size: @font;
    background-color: red;
    text-align: center;
    height: 1rem;
    line-height: 1rem;
}

编译后的css文件

html {
  font-size: 50px;
}
.box {
  color: purple;
  font-size: 20px;
  background-color: red;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
}

html文件


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./less.css">
</head>

<body>
    <div class="box">
        hello word
    </div>



</body>

</html>

在这里插入图片描述

less嵌套

子元素的样式直接写在父元素上即可
如果有链接伪类选择器交集选择器伪元素选择器使用&进行连接

less文件


// 后代选择器

.box {
    width: 400px;
    height: 400px;
    margin: 20px auto;
    background-color: red;
    p {
        width: 200px;
        height: 200px;
        background-color: rebeccapurple;

    }

}

// 伪类选择器
a {
    display: block;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    background-color: yellow;
    text-decoration: none;
    &:hover {
        background-color: red;
    }
}

编译好的css文件


.box {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  background-color: red;
}
.box p {
  width: 200px;
  height: 200px;
  background-color: rebeccapurple;
}
a {
  display: block;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  background-color: yellow;
  text-decoration: none;
}
a:hover {
  background-color: red;
}

html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./less嵌套.css">
</head>

<body>
    <div class="box">
        <p></p>
    </div>


    <a href="#">百度</a>
</body>

</html>

在这里插入图片描述

less运算

乘号（*）除号（/）的写法
运算符中间左右有个空格隔开
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位

less文件

@baseline:50px;
@border:5px + 1;
html {
    font-size: @baseline;
}

.box {
    width: 80rem/@baseline;
    height:80rem/@baseline;
    border:@border solid red
}

css文件

html {
  font-size: 50px;
}
.box {
  width: 1.6rem;
  height: 1.6rem;
  border: 6px solid red;
}

html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./operation.css">
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述

技术方案

1.less+rem+媒体查询

2.flexible.js+rem

适配的目标

让一些不能等比自适应的元素，当设备尺寸发生改变的时候，等比例适配当前设备。

设计稿常见尺寸

在这里插入图片描述

rem适配方案

①假设设计稿是750px

②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

③每一份作为html字体大小，这里就是50px

④那么在320px设备的时候，字体大小为320/15就是 21.33px

⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的

⑥比如我们以750为标准设计稿
⑦一个100_100像素的页面元素在 750屏幕下，就是 100/ 50 转换为rem 是 2rem_2rem 比例是1比1

⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1

⑨但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

总结

页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (min-width:320px) {
            html {
                font-size: 21.33px;
            }
            
        }
        
        @media screen and (min-width:750px) {
            html {
                font-size: 50px;
            }
        }
        
        div {
            width: 2rem;
            height: 2rem;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述