rem 布局
1. 基本概念
- 语法:只要子元素的属性值,设置采用rem单位,就会跟着发生等比变化;唯一控制(HTML是唯一);
- rem单位,可以控制整个页面所有元素有关PX类;(宽、高、padding、margin、top…)只要是你设置数值的地方都可以实现控制;
-
-例子
-
1.根html 为 15px html { font-size: 15px; }
2.此时 div 的宽就是 100px div { width: 10rem; }
2. 媒体查询
- (该可以根据屏幕不同的宽,从而获得不同的样式,然后实现不同的样式显示;)
- 语法: CSS3 新语法,是一个查询屏幕的过程,通过查询当前屏幕尺寸属于哪个范围,从而有哪个范围的样式生效;
- mediatype (media feature)` 都是它的查询条件
@media mediatype and|not|only (media feature) { CSS-Code; }
-
mediatype:媒体类型;查询不同的终端设备 ; screen最为常用:查询当前设置的屏幕;
-
and|not|only:关键字;将多个条件连接在一起共同查询;
-
- and**:可以将多个媒体特性连接到一起,相当于“且”的意思;最为常用;生活中:“我既要娶白富美,又要走上人生颠覆”;
- not:排除 某个 媒体类型,相当于“非”的意思,可以省略。生活:“我喜欢看电影,除了恐怖片”;
- only:指定某个特定的 媒体类型,可以省略。 生活:“我这辈子非你不嫁”;
-
(media feature):媒体特性
- 对于屏幕 screen,屏幕的宽度就是一个特性;
宽度的最小界值500px,大于等于500px @media screen and (min-width:500px) { body { background-color: red; } }
- 对于屏幕 screen,屏幕的宽度就是一个特性;
- 档位划分
划分要求:- 档位1:w<540px w <= 539px;
- 档位2: 540px<= w and w< 640px;
- 档位3: 640px<= w
- 语法实现:
-
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
@media screen and (min-width: 540px) and (max-width: 639px) {
body {
background-color: green;
}
}
@media screen and (min-width: 640px) {
body {
background-color: red;
}
}
简写形式:
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
表示:
3. less—CSS预处理器
- 详细介绍:Less中文网址:http://less[css.cn/](
- vscode安装
- 搜索 Easy LESS
- 安装完毕插件,重新加载下 vscode。
- 测试:保存一下 .less 文件,会自动生成 .css 文件。
- 离线安装:从本地安装— 重启---- 测试
- 变量
- 变量是指没有固定的值,可以改变的。
- 我们CSS中的一些颜色和数值等经常使用,可以设置为变量;
- 语法:
//@变量名:值;
@bg:#333;
.box_1 {
background-color: @bg;
}
.box_2 {
background-color: @bg;
}
- 命名规则:
- 必须有@为前缀
- 不能包含特殊字符~=+、不能以数字开头
- 大小写敏感区分;
- 嵌套
- 类似HTML一样写LESS结构;
- 语法:
#header .logo {
width: 300px;
}
/* less 写法 */
#header {
.logo {
width: 300px;
}
}
交集|伪类|伪元素选择器,语法:
/* css写法 */
a:hover{
color:red;
}
/* less写法 */
a{
&:hover{
color:red;
}
}
- 运算
- 任何数字、颜色或者变量都可以参与运算。
- Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。
- 语法:// 数字
width: 200px - 50;
// 颜色
background-color: #666 - #222;
// 变量
@border: 5px;
border: @border solid red;
// 注意:运算符中间左右有个空格隔开 1px * 5
-
rem+媒体查询+less 方案
- 初体验:rem+媒体查询 解读:不同屏幕,变化HTML的font- sizing大小;(基础块的改变) - less能给我带来什么?计算:页面元素,HTML的font-sizing大小 - 问题:不同档位下的HTML font-size大小是怎么计算的?随便给的?
- 设计稿
- 尺寸不同,页面在不同的尺寸下要等比缩放
- 尺寸不同,页面在不同的尺寸下要等比缩放
- 设计稿
-
档位划分:min-width 最小界值;
@no:10
// 320
@media screen and (min-width: 320px) {
html {
font-size:320px/@no;
}
}
// 360
@media screen and (min-width: 360px) {
}
// 375 iphone 678
@media screen and (min-width: 375px) {
}
// 384
@media screen and (min-width: 384px) {
}
// 400
@media screen and (min-width: 400px) {
}
// 414
@media screen and (min-width: 414px) {
}
// 424
@media screen and (min-width: 424px) {
}
// 480
@media screen and (min-width: 480px) {
}
// 540
@media screen and (min-width: 540px) {
}
// 720
@media screen and (min-width: 720px) {
}
// 750
@media screen and (min-width: 750px) {
}
- font-size
- 基础块的大小,在各个档位内如何确认?
- 在这里,我们约定:按照每个档位的宽度的最小值,都划分相同的份数,得到当前档位的HTML的font-size大小;
- 配合less,例如划分为20等份:
方案 1
- . 介绍
- 目标:等比缩放;
- 档位划分:按照上面划分;
- 档位内font-size设置:约定每个档位最小值 / 约定好的份数10 ;
- 过程:通过一个设计稿,得到1rem(基础块),那么其他屏幕变化 时,1rem(基础块)也会变化,自然就是等比缩放;
- 操作
- 第一步:
- **原稿实现:**先拿到设计稿:750px;页面上所有的元素,在750px设计稿上进行测量,代码实现;(流式、flex)
- 第二步:
- 准备各个档位下的rem:提前准备好各个档位下的HTML 的font-size大小;
- 拿到当前设计稿屏幕尺寸对应的rem:因为我现在是750px的设计稿,所以可以得到750px这个尺寸属于的档位下的HTML 的font-size大小,也就是750px设计稿下的1rem值。
- 计算比例:把页面刚才所有的元素的PX值替换为 rem 比例值;(82px 82rem/75);
- 达到目标:那么,屏变化时,1rem(基础块)也会变化,自然就是等比缩放;
- 第一步:
- 构建文件目录
- 准备工作
视口设置、样式初始化:
- 准备工作
<meta name="viewport" content="width=device-width,
user-scalable=no,initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
- body样式:
body {
width:750px;
margin: 0 auto;
}
- 页面实现
- 先用流式布局,或flex布局把页面按照设计稿实现出来;效果:只是宽度方向上有变化;
- rem替换:
- 在划分档位,设置HTML的font-size大小,得到各个档位下的1rem值的文件:common.less;
-// 我们此次定义的划分的份数 为 15
@no: 15;
// 320
@media screen and (min-width: 320px) {
html {
font-size: 320px / @no;
}
}
...
- index.less引入:
// 引入:首页的样式less文件
// @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面
@import “common”; - 修改刚才所有的固定的PX值的属性
body {
min-width: 320px;
width: 15rem;
margin: 0 auto;
}
小结
- 操作过程:
- 第一步:
- **原稿实现:**先拿到设计稿:750px;页面上所有的元素,在750px设计稿上进行测量,代码实现;(流式、flex)
- 第二步:
- **2.1 准备各个档位下的rem **:提前准备好各个档位下的HTML 的font-size大小;
- 2.2 拿到当前尺寸的rem:因为我现在是750px的设计稿,所以可以得到750px这个尺寸属于的档位下的HTML 的font-size大小,也就是750px设计稿下的1rem值。
- 2.3 计算比例:把页面刚才所有的元素的PX值替换为 rem 比例值;(82px 82/50rem);
- 达到目标:那么,屏变化时,1rem(基础块)也会变化,自然就是等比缩放;
- 第一步:
- 图示 1rem(基础块) 变化过程:
方案2
- 介绍
- 目标:等比变化;
- 档位划分:没有档位划分,档位划分的意义是设置不同的font-size大小;JS帮我们实现;
- font-size:通过 flexible.js 设置
- 过程:通过一个设计稿,得到1rem(基础块),那么其他屏幕变化时,1rem(基础块)也会变化,自然就是等比缩放;
- 操作
- 第一步:
- **原稿实现:**先拿到设计稿:750px;页面上所有的元素,在750px设计稿上进行测量,代码实现;(流式、flex)
- 第二步:
- 准备各个档位下的rem:这个不需要准备,JS帮我们实现每个屏幕都有自己的font-size
- 拿到当前尺寸的rem:因为我现在是750px的设计稿,所以可以得到750px这个尺寸属于的档位下的HTML 的font-size大小,也就是750px设计稿下的1rem值。
- 计算比例:把页面刚才所有的元素的PX值替换为 rem 比例值;(82px 82/75rem);
- 达到目标:那么,屏变化时,1rem(基础块)也会变化,自然就是等比缩放;
- 构建文件目录
- js文件夹:放入flexible.js
- 准备工作
视口、样式初始化:
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
- body样式初始化:
body {
width: 750px;
margin: 0 auto;
}
- 页面实现
引入JS文件:划分为10份
<!-- 引入我们的flexible.js 文件 -->
<script src="js/flexible.js"></script>
// 把js控制的font-size封顶
@media screen and (min-width: 750px) {
html {
font-size: 75px!important;
}
}
- 把页面内的PX值转为rem单位,但是我们这里又没有less计算功能,
- 少了less,我们需要计算功能,插件 cssrem ,设置:
- 小结
- 操作过程:
- 第一步:页面实现flex把UI给我们图,原稿实现;
- 第二步:转化rem
- 图示 1rem(基础块) 变化过程:
方案对比
- 相同:都是对font-size实现控制,1rem(基础块)变化,实现等比效果;
- 不同:
- rem+媒体查询+less:通过设置不同的档位下,设置不同的1rem值;效果为阶梯式变化;
- flexible.js+rem:通过JS设置不同的1rem值,效果为连续变化;这个看起来更为连贯,适配任何屏幕。
- 小结
- rem:唯一控制;基础块;
- 媒体查询:各个档位下,设置有不同的样式进行生效;通过查询当前屏幕尺寸属于哪个范围,从而有哪个范围的样式生效;
- rem+媒体查询:通过查询当前屏幕尺寸属于哪个范围,得到哪个范围下的HTML font-size大小,变化屏幕时,变化rem,从而控制页面所有元素;
- rem:唯一控制;基础块;
- 方案:等比控制方案;
- rem+媒体查询+les:通过设置不同的档位下(媒体查询),设置不同的1rem值;效果为阶梯式变化;
- flexible.js+rem:通过JS设置不同的1rem值,效果为连续变化;这个看起来更为连贯,适配任何屏幕。
- 实战过程:
- 第一步:
- **原稿实现:**先拿到设计稿:750px;页面上所有的元素,在750px设计稿上进行测量,代码实现;(流式、flex)
- 第二步:
- 准备各个档位下的rem:提前准备好各个档位下的HTML 的font-size大小;或JS准备;
- 拿到当前尺寸的rem:因为我现在是750px的设计稿,所以可以得到750px这个尺寸属于的档位下的HTML 的font-size大小,也就是750px设计稿下的1rem值。
- 计算比例:把页面刚才所有的元素的PX值替换为 rem 比例值;(82px 82/50rem);
- 达到目标:那么,屏变化时,1rem(基础块)也会变化,自然就是等比缩放;
- 第一步: