目录
- 1. rem + 媒体查询 + less布局
- 1.1 rem布局
- 1.2 媒体查询布局
- 1.3 引入资源
- 1.4 Less
- 1.4.1 Less的介绍
- 1.4.2 Less变量
- 1.4.3 IDEA自动编译Less
- 1.4.4 Less嵌套
- 1.4.5 Less运算
- 1.5 rem实际开发适配方案
- 1.6 px2rem插件
- 2. vw/vh布局
- 3. vmin/vmax布局
1. rem + 媒体查询 + less布局
1.1 rem布局
rem布局的优点:
- 能实现文字的随着屏幕的变大而变大
- 能实现高度随着屏幕的变大而变大。且宽度和高度可以等比例缩放
em单位: 是一个相对单位，相对于父元素的字体大小而言。如下所示。p盒子的宽高都是100px
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<title>Title</title>
<style>
div {
font-size: 10px;
}
p {
width: 10em;
height: 10em;
background-color: pink;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
rem单位: 是一个相对单位，相对于html元素的字体大小而言，rem可以是小数，如.5rem。如下所示。p盒子的宽高都是100px。这样只需要修改html元素的字体大小，就可以控制整个页面的其它元素大小
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<title>Title</title>
<style>
html {
font-size: 10px;
}
div {
font-size: 5px;
}
p {
width: 10rem;
height: 10rem;
background-color: pink;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
1.2 媒体查询布局
rem布局中定义的html的font-size是固定的，并不能根据移动设备的大小进行自动缩放。而媒体查询(Media Query)可以。它是CSS3新语法。每次改变屏幕大小，媒体查询都会重新渲染页面
语法如下：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
- mediatype：媒体类型，即设备类型，可选参数有all(用于所有设备)、print(用于打印机和打印预览)、scree(用于电脑屏幕，平板电脑，智能手机等)
- 关键字and|not|only：and表示且，同时满足(mediatype和media feature)或(多个media feature)时CSS-Code才会生效；not表示非，只和mediatype结合使用，排除指定的mediatype；only，只和mediatype结合使用，表明只有指定mediatype才生效
- media feature媒体特性：每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的样式。常用的三个媒体特性：width(定义输出设备中页面可见区域的宽度)、min-width(定义输出设备中页面最小可见区域宽度)、max-width (定义输出设备中页面最大可见区域宽度)
作用：
- 可以针对不同的媒体类型，设置不同的样式
- 可以针对不同的屏幕，设置不同的样式
建议:
媒体查询建议按照从大到小或从小到大的顺序来写，因为后面定义的媒体查询如果和前面定义的媒体查询的有冲突部分，会对冲突的部分进行覆盖
如下示例。效果如下：
- 屏幕最大宽度在401px-800px时，html的font-size为10px。同时div的宽高为100px和100px
- 屏幕最大宽度在小于等于400px时，html的font-size为2px。同时div的宽高为20px和20px
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<title>Title</title>
<style>
/* 屏幕最大宽度在401px-800px时，html的font-size为10px */
@media screen and (max-width: 800px) {
html {
font-size: 10px;
}
}
/* 屏幕最大宽度在小于等于400px时，html的font-size为2px */
@media screen and (max-width: 400px) {
html {
font-size: 2px;
}
}
div {
width: 10rem;
height: 10rem;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.3 引入资源
通过直接在link中判断不同的屏幕宽度，然后引入不同的CSS文件
示例：当屏幕宽度大于等于800px，让div一行显示2个；当屏幕宽度在400px - 799px时，让div一行显示1个
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="css/style400.css" media="screen and (min-width: 400px)">
<link rel="stylesheet" href="css/style800.css" media="screen and (min-width: 800px)">
</head>
<body>
<div>1</div>
<div>2</div>
</body>
</html>
css/style400.css如下：
div {
width: 100%;
height: 100px;
}
div:nth-child(1) {
background-color: pink;
}
div:nth-child(2) {
background-color: purple;
}
css/style800.css如下：
div {
float: left;
width: 50%;
height: 100px;
}
div:nth-child(1) {
background-color: pink;
}
div:nth-child(2) {
background-color: purple;
}
1.4 Less
1.4.1 Less的介绍
CSS的缺点：
CSS是一门非程序式语言，没有变量、函数、scope作用域等概念。所以存在如下缺点：
- CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的
- 不方便维护及扩展，不利于复用
- CSS没有很好的计算能力
Less的介绍：
常见的CSS预处理器有：Less、Sass、Stylus。Less(Leaner Style Sheets)是一门CSS扩展语言，它并没有减少CSS的功能，而是在现有的CSS语法上，引入了变量、Mixin(混入)、运算以及函数等功能。为CSS加入程序式语言的特性，大大简化了CSS的编写。Less中文网址
1.4.2 Less变量
先新建一个后缀名为less的文件， 在这个less文件里面书写less语句。如test.less
可以通过@import "common";，导入common.less文件到该less文件
Less变量:
- 场景：CSS中的一些颜色和数值等经常使用且会改变。可以使用变量
- 语法:
@变量名:值;。其变量名大小写敏感；不能包含特殊字符；不能以数字开头
使用示例如下。如果想修改字体大小，直接修改变量的值，就可以修改多处的字体大小
// 如果想修改字体大小，直接修改变量的值，就可以修改多处的字体大小
@font: 14px;
div {
font-size: @font;
}
span {
font-size: @font;
}
1.4.3 IDEA自动编译Less
Less包含一套自定义的语法及一个解析器。最终需要通过解析器将自定义的语法编译成CSS文件，才能供html文件使用
- 安装node.js
- 安装less。如下查看，已经安装了less
C:\Users\hehuan>npm ls less -g
E:\install_software\Node.js\node-v20.4.0-win-x64
+-- @vue/cli@5.0.8
| `-- vue@2.7.14 -> .\node_modules\@vue\cli\node_modules\.store\vue@2.7.14\node_modules\vue
| `-- @vue/compiler-sfc@2.7.14 -> .\node_modules\@vue\cli\node_modules\.store\@vue+compiler-sfc@2.7.14\node_modules\@vue\compiler-sfc
| `-- less@4.1.3 deduped
+-- less-loader@11.1.3
| `-- less@4.1.3 deduped
`-- less@4.1.3
- IDEA安装Node.js插件
- IDEA安装File Watchers插件
- File Watchers添加less。操作如下图，最后点击Apply。默认编译的CSS文件和less文件在同一文件夹下
- IDEA编辑less文件会自动保存。File Watchers监测到less文件保存会自动编译，从而达到实时编译less文件成CSS文件
1.4.4 Less嵌套
- 子元素的样式直接写到父元素里面。会自动解析为后代选择器
- 如果有伪类选择器(如
:hover)、伪元素选择器(如:before)，内层选择器的前面需要加&
示例如下。div盒子里有一个a链接
div {
width: 200px;
height: 200px;
background-color: pink;
a {
color: red;
&:hover {
color: blue;
}
}
}
转换成的CSS文件内容如下：
div {
width: 200px;
height: 200px;
background-color: pink;
}
div a {
color: red;
}
div a:hover {
color: blue;
}
1.4.5 Less运算
任何数字、颜色或者变量都可以参与运算。Less提供了加(+)、减(-)、乘(*)、除(/)算术运算
- 两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
- 两个数参与运算，如果2个数都有单位，且单位不一样，最后的结果以第一个单位为准
Less示例如下：
@baseFont: (3px + 2) * 2;
html {
font-size: @baseFont;
}
div {
background-color: #666 - #222;
}
img {
width: 82rem ./ @baseFont;
height: (82 / 10rem);
}
生成的CSS文件如下：
html {
font-size: 10px;
}
div {
background-color: #444444;
}
img {
width: 8.2rem;
height: 8.2rem;
}
1.5 rem实际开发适配方案
- 开发适配方案
- 按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小(媒体查询)
- CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 em为单位的值
一般情况下，我们以一套或两套设计稿适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果。现在基本以750px为准
- 技术方案选择1：less、媒体查询、rem
参考的Common.less文件如下：
// 设置常见的屏幕尺寸 修改里面的html文字大小
// 用于PC端，一定要写到最上面
html {
font-size: 50px;
}
// 我们此次定义的划分的份数为15
@no: 15;
// 320
@media screen and (min-width: 320px) {
html {
font-size: 320px / @no;
}
}
// 360
@media screen and (min-width: 360px) {
html {
font-size: 360px / @no;
}
}
// 375, iphone 678
@media screen and (min-width: 375px) {
html {
font-size: 375px / @no;
}
}
// 384
@media screen and (min-width: 384px) {
html {
font-size: 384px / @no;
}
}
// 400
@media screen and (min-width: 400px) {
html {
font-size: 400px / @no;
}
}
// 414
@media screen and (min-width: 414px) {
html {
font-size: 414px / @no;
}
}
// 424
@media screen and (min-width: 424px) {
html {
font-size: 424px / @no;
}
}
// 480
@media screen and (min-width: 480px) {
html {
font-size: 480px / @no;
}
}
// 540
@media screen and (min-width: 540px) {
html {
font-size: 540px / @no;
}
}
// 720
@media screen and (min-width: 720px) {
html {
font-size: 720px / @no;
}
}
// 750
@media screen and (min-width: 750px) {
html {
font-size: 750px / @no;
}
}
- 技术方案选择2(推荐，更简单): 移动端适配库flexible.js(无需了解源码，会自动实时的将html的font-size，设置为html的clientWidth的十分之一)。我们要做的，就是确定好我们当前设计稿对应的
@baseFont就可以了。比如当前设计稿是750px， 那么我们只需要把对应的@baseFont设置为75
从https://github.com/amfe/lib-flexible下载Code的zip包进行解压，在index.html引入里面的index.js或index.min.js。这样就不用我们自己写技术方案选择1的Common.less文件了。但还需要兼容PC端，就需要设置最大750px的媒体查询，如下所示：
@media screen and (min-width: 750px) {
html {
/* 进行提权 */
font-size: 75px!important;
}
}
1.6 px2rem插件
可以自动将px转换成rem的一个插件。在IDEA安装px2rem插件，然后在settings进行root fontsize的大小，如下所示：
然后可以按alt + d自动将px转换成rem。也可以单独对某个px按alt + enter进行转换
2. vw/vh布局
vw和vh类似于rem，是相对于viewport视口的一个尺寸单位，但不用我们进行媒体查询
- 1vw = 1/100视口宽度
- 1vh = 1/100视口高度(一般不用，一般高度也使用vw，这样可以等比例缩放)
- 设计稿使用: 设计稿宽度为750px，则1vw为7.5px，如果一个盒子的宽度为150px，则盒子宽度为20vw
示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<title>Title</title>
<style>
div {
width: 20vw;
height: 20vw;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3. vmin/vmax布局
vw在手机横屏下宽度会拉伸的很大，而vmin或vmax是手机屏幕的宽度和高度的最小值或最大值，所以取vmin时，不管手机横屏还是手机竖屏宽度都不会拉伸
