一、rem布局
1、rem单位
- rem(root em)是一个相对单位,类似于em,em是父元素字体大小
- rem的基准是相对于
<html>
元素的字体大小 - 比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 转换成px表示就是24px
- 优势:父元素文字大小可能不一致,但是整个页面只有一个
<html>
,可以很好地来控制整个页面的元素大小比例
* {
margin: 0;
padding: 0;
}
html {
font-size: 30px;
}
.box {
width: 200px;
height: 200px;
background-color: greenyellow;
font-size: 20px;
}
.box p {
/* em:相对单位,参考的是父级元素的字号大小的倍数,如果是 2em 表示字号的2倍 */
/* width: 5em; */
/* height: 4em; */
/* rem:相对单位,参考的是根元素 html 的字号大小的倍数,如果是 2rem 表示 html 元素字号的 2 倍 */
width: 5rem;
height: 4rem;
background-color: hotpink;
/* rem 优势:参考元素是 html ,一个页面中只有一个 html 元素,可以实现整体控制 */
}
2、媒体查询(@media)
判断屏幕宽度,CSS3新增语法,类似于触发条件,如果满足会应用其中的样式,否则不执行
- 可以针对不同媒体类型定义不同的样式
- 可以针对不同屏幕大小设置不同样式
- 重置浏览器大小过程中,页面会根据浏览器的宽度和高度重新渲染页面
- 目前移动端设备都可以使用媒体查询
语法规范
- 必须使用@mesia开头
- mediatype - 媒体类型
- and、not、only - 关键字
- media featyre - 媒体特性,必须由小括号包含
/* 媒体查询: @media 媒体类型 关键字 媒体特性 */
/* 在屏幕设备中,判断屏幕尺寸大于等于800px的时候,最小宽度是 800px */
@media screen and (min-width: 800px) {
/* 背景颜色为粉色 */
body {
background-color: hotpink;
}
}
/* 媒体查询可以书写多个 */
/* 在屏幕设备中,判断屏幕最大宽度为600px 时,背景颜色为绿色 */
@media screen and (max-width: 600px) {
body {
background-color: green;
}
}
(1)mediatype - 媒体类型
将不同设备终端划分为不同的类型,称为媒体类型
值 | 解释说明 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等(最常用) |
(2)关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
- and:可以将多个媒体特性连接到一起,相当于“且”的意思。
- not:排除某个媒体类型,相当于“非”的意思,可以省略。
- or:可以测试多个媒体查询的条件,只要有一个条件成立,就执行, “或”的意思。
- only:指定某个特定的媒体类型,可以省略。
(3)媒体特性
每种不同的媒体类型具有不同的特性,根据不同的媒体类型的媒体特性设置不同的样式风格,要加小括号进行包含
值 | 解释说明 |
---|---|
width | 定义输出设备中页面可见区域的宽度 |
min-width | 定义输出设备中页面最小可见区域宽度 |
max-width | 定义输出设备中页面最大可见区域宽度 |
(4)案例——根据页面宽度改变背景颜色
实现思路
- 按照从大到小的或者从小到大的思路
- 注意我们有最大值max-width和最小值min- width都是包含等于的
- 当屏幕小于540像素,背景颜色变为蓝色(x<= 539)
- 当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色( 540=< x <= 969)
- 当屏幕大于等于970像素的时候,背景颜色为红色( x>= 970)
注:为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们]最喜欢的还是从小到大来写, 这样代码更简洁
/* 1.屏幕小于等于539px 时,背景为蓝色 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
/* 2.屏幕大于等于540px 并且 小于等于 969px 时,背景为绿色 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
body {
background-color: green;
}
} */
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
/* 3.屏幕大于等于 970px 时,背景为红色 */
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
注:媒体查询+rem就可以实现不同设备宽度,实现页面元素大小的动态变化
3、引入资源
当样式比较繁多的时候,我们可以针对不同的媒体使用不同stylesheets (样式表),原理就是直接在<link>
中判断设备的尺寸,然后引用不同的css文件。
<style>
/* 1.需求一:屏幕宽度小于640px,大于320px时,让两个div单独占一行 */
/* 2.需求二:屏幕宽度大于640px,让两个div并排一行显示 */
/* 建议:从小到大进行引入 */
/* 根据媒体查询条件,分别引入 css 文件 */
</style>
<link rel="stylesheet" href="css/style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="css/style640.css" media="screen and (min-width: 640px)">
二、Less基础
1、css弊端
CSS是一门非程序式语言,没有变量、函数、SCOPE (作用域)等概念
- CSS需要书写大量看似没有逻辑的代码,CSS 冗余度是比较高的
- 不方便维护及扩展,不利于复用
- CSS没有很好的计算能力
- 非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目
2、Less介绍
- Less (Leaner Style Sheets的缩写)是一门CSS扩展语言,也成为CSS预处理器
- 做为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性
- 它在CSS的语法基础之上,引入了变量,Mixin (混入),运算以及函数等功能,大大简化CSS的编写
- 降低了CSS的维护成本,就像它的名称所说的那样,Less 可以让我们用更少的代码做更多的事情
Less中文网址: lesscss.cn/
常见的CSS预处理器: Sass、 Less、 Stylus
Less是一门CSS预处理语言,它扩展了CSS的动态特性。
3、Less安装
- 安装nodejs,可选择最新的版本,网址: https://nodejs org/en/download/
- 检查是否安装成功,使用cmd命令(win10 是window +r打开运行输入cmd)输入 ” node -v "查看版本即可
- 基于node.js在线安装Less,使用cmd命令”npm install -g less”即可
- 检查是否安装成功,使用cmd命令“lessc -v ”查看版本即可
4、Less使用
(1)Less变量
变量是指没有固定的值,可以动态改变的。因为我们CSS中的- -些颜色和数值等经常使用。
// less 变量
// 创建变量
// 变量命名规则:1、必须以 @ 开头, 2、不能包含特殊符号,
// 3、数字不能作为开头,4、大小写敏感
@color: yellow;
@Color: deeppink;
@fs14: 14px;
// 变量使用
div {
background-color: @color;
}
h2 {
background-color: @color;
}
(2)Less编译
本质上,Less 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的CSS文件。所以,我们需要把我们的.less文件,编译生成为.css 文件,这样我们的html页面才能使用。
方法(nodejs) :在当前文件夹,使用cmd命令“lessc style.less > style.css”
推荐方法:VScode安装Easy LESS插件,重启后每当保存less文件会自动生成一个同名的css文件,然后在html文件中引入css即可
(3)Less嵌套
如果有&符号,它就被解析为父元素自身或父元素的伪类
// less 嵌套
.header {
width: 200px;
height: 200px;
background-color: pink;
// 后代选择器
.logo {
width: 100px;
height: 100px;
background-color: green;
}
}
.nav {
width: 200px;
height: 200px;
background-color: pink;
// 后代选择器
a {
display: block;
width: 100px;
height: 100px;
background-color: skyblue;
// 交集选择器
&.box {
background-color: yellowgreen;
}
// 伪类选择器
&:hover {
background-color: deeppink;
}
}
}
(4)Less运算
任何数字、颜色、或者变量都可以参与运算。less提供加减乘除四则运算
注:
- 参与运算的两个数字,可以一个有单位,一个没有单位,最终单位就是唯一的那个单位
- 参与运算的两个数字,两个都有单位,最终单位取第一个数字的单位
- less的运算符左右必须加空格
- 除法外层需要添加括号,例如width: (200rem / 50px)
// less 运算
@baseFont: 50px;
html {
font-size: @baseFont;
}
div {
// width: 200px + 50;
// height: 200px * 1.5;
// rem 的单位
// width: (200rem / 50px);
// height: (300rem / 50);
// width: (200rem / @baseFont);
width: 200px + 2rem;
height: (300rem / @baseFont);
background-color: #999 - #333;
}
三、rem适配方案
1、思考
- 我们适配的目标是什么?
- 怎么取达到这个目标的?
- 在实际的开发当中使用?
答:
- 让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备
- 使用媒体查询根据不同设备按比例设置HTML的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配
2、rem实际开发适配方案
- 按照设计稿与设备宽度的比例,动态计算并设置html根标签的font- size大小; (媒体查询)
- CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值
3、rem适配方案技术使用(市场主流)
- 方案1:less + 媒体查询 + rem
- 方案2:淘宝flexible.js + rem (推荐)
(一)方案1
(1)常见设计稿尺寸
设备 | 常见宽度 |
---|---|
iphone 4/5 | 640px |
iphone 6/7/8 | 750px |
Android | 常见320px. 480px、 540px、 600px、 720px、 768px、 800px、 1080px 目前市场主流设备尺寸按照1080px设计 |
一般情况下,我们以一套或两套效果图适应大部分的屏幕,放弃极端屏或对其优雅降级,牺牲一些效果,现在基本以750为准。
(2)动态设置html标签font-size大小
- 假设设计稿为750px
- 人为假设把屏幕分为15等份(也可以是其他数字)
- 每一份作为html字体大小,就是50px
- 那么适配比如320px的设备时,字体大小为320/15 就是 21.33px
- 用我们的页面大小除以不同的html字体大小,就可以得到想要的rem数值
比如我们以750px为标准设计稿:
- 一个100* 100像素的页面元素在750屏幕下,就是100 / 50转换为rem是2rem *2 rem比例是1比1
- 320屏幕下,html 字体大小为21.33则2rem = 42.66px此时宽和高都是42.66,但是宽和高的比例还是1比1
- 但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果
元素大小取值方法:
- 最后的公式:页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
- 屏幕宽度/划分的份数就是 html font-size的大小
- 或者:页面元素的rem值=页面元素值(px)/ html font-ize字体大小
(二)方案2
- 手机淘宝团队出的简洁高效移动端适配库
- 我们再也不需要在写不同屏幕的媒体查询,因为里面js做了处理
- 它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。
- 我们要做的,就是确定好我们当前设备的html文字大小就可以了
- 比如当前设计稿是750px,那么我们只需要把 html文字大小设置为75px(750px / 10)就可以 里面页面元素rem值:页面元素的px 值 / 75剩余的,让flexible.js来去算
github地址: https://github.com/amfe/lib-flexible
vscode插件cssrem:这个插件会在你输入px值的时候提供选项自动转换成rem数值,vscode有一个默认的rem字号,我们可以更改默认的rem字号(在设置里面直接搜索rem即可),然后重启vscode就可以了