移动web开发学习笔记（rem适配布局+响应式布局）

super码力

已于 2022-05-21 23:58:49 修改

阅读量492

点赞数 1

分类专栏： # HTML和CSS学习笔记文章标签：前端 css css3

于 2021-11-10 20:39:45 首次发布

本文链接：https://blog.csdn.net/m0_61843874/article/details/121255249

版权

HTML和CSS学习笔记专栏收录该内容

18 篇文章 10 订阅

订阅专栏

文章目录

一、移动web开发
二、rem适配布局
三、响应式布局
总结

一、移动web开发

移动端常见布局：

流式布局（百分比布局）
flex弹性布局
less+rem+媒体查询布局
混合布局

今天我们来说说less+rem+媒体查询布局，flex弹性布局在之前已经详细讲过了，如需请点击链接查看flex相关知识点

二、rem适配布局

1.rem基础

rem（root em）是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px；非根元素设置width：2rem；则换成px表示就是24px。

2.less基础

Less是一门CSS扩展语言，也成为CSS预处理器，作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性，它在CSS的语法基础上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多是事情。

2.1 less出现的原因

维护css的弊端；

CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念。
CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS没有很好的计算能力。
非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

2.2 less安装

安装nodejs,可选择版本（8.0），网址：http://nodejs.cn/download/;
检查是否安装成功，使用cmd命令（win10是window+r打开运行输入cmd）—输入“node -v”查看版本即可；
基于nodejs在线安装less，使用cmd命令“npm install -g less”即可
检查是否安装成功，使用cmd命令“less -v"查看版本即可

2.3 less使用

首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。在less文件中导入less文件语法格式
在index.less中导入common.less文件如下：
@import ”common“

2.3.1 Less变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

变量名命名规范：

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

语法：
@变量名：值；

2.3.1 Less编译

less编译：本质上，less包含一套自定义的语法以及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。所以，我们需要把我们的less文件，编译生成为CSS文件，这样我们的html页面才能使用。使用easy less插件编译。

2.3.1 Less嵌套

说白了就是子元素的样式直接写到父元素里面就好了。

语法：
1、选择器的嵌套：
#header .logo{
width：300px;
}
Less嵌套写法：
#header{
.logo{
width：300px;
}
}
2、选择器的嵌套：
a:hover{
color:red;
}
Less嵌套写法：
a{
&:hover{
color:red;
}
}