文章目录

  • 一、rem与em
  • 二、媒体查询
  • 2.1 媒体查询介绍
  • 2.2 媒体查询+rem 实现元素大小动态变化
  • 2.3 媒体查询：引入资源
  • 三、less语法
  • 3.1 less介绍
  • 3.2 less变量
  • 3.3 less嵌套
  • 3.4 less运算
  • 四、rem适配方案
  • 4.1 方案一：rem+媒体查询+less技术
  • 4.2 方案二：rem+flexible.js(推荐)


一、rem与em

rem(root em)是一个相对单位，类似于em，em 是父元素字体大小。
不同的是 rem 的基准是 相对于 html 元素的字体大小。

  • 比如，根元素(html) 设置 font-size = 12px; 非根元素设置 width: 2rem; 则换成 px 表示就是 24px
     

(rem: root em，意思是根元素，相对于根元素的字体大小)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            font-size: 14px;
        }
        div {
            font-size: 12px;
        }
        p {
            /* width: 10em; */
            /* height: 10em; */
            width: 10rem;
            height: 10rem;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

1.em，相对于父元素，一个页面有多个父元素，这些父元素的字体大小可能不一样。
2.rem，相对于根元素，一个页面只有一个根元素(html)，因此 rem 布局元素之间大小是统一的

  • rem 的优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小来进行整体控制

 

二、媒体查询

2.1 媒体查询介绍

媒体查询 (Media Query) 是CSS3新语法。

  • 使用@media查询，可以针对不同的媒体类型定义不同的样式
  • 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
  • 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
  • @media 可以针对不同的屏幕尺寸设置不同的样式

上面提到使用 rem 时 根元素(html) 的文字大小是写死的，而使用 媒体查询(@media) 就能根据不同的设备来更改 根元素(html) 的文字大小来适应不同的设备

 
语法规范:

@media mediatype and/Inot/only (media feature){
	css-code;
}
  • 用 @media 开关，注意 @ 符号
  • mediatype 媒体类型(手机、平板、电脑)
  • 关键字 and not only(媒体类型与后面的连接)
  • media feature 媒体特性，必须有小括号包含

1.mediatype 查询类型
(将不同的终端划分成不同的类型，称为媒体类型)

  • all。用于所有设备
  • print。用于打印机和打印预览
  • scree。用于电脑屏幕，平板电脑，智能手机等
     

2.关键字
(关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件)

  • and: 可以将多个媒体特性连接到一起。
  • not: 排除某个媒体类型，可以省略
  • only: 指定某个特定的媒体类型，可以省略
     

3.媒体特性
(每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，暂且了解三个，注意他们要加小括号包含)

  • width: 定义输出设备中页面可见区域的宽度
  • ==min-width: 定义输出设备中页面最小可见区域宽度
  • max-width: 定义输出设备中最大见区域的宽度

 
示例：根据不同的屏幕像素大小来改变背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
        /* 在我们的屏幕上，并且最大宽度为 600px时 */
        @media screen and (max-width: 600px){
            div {
                background-color: red;
            }
        }
        /* 在我们的屏幕上，并且最大宽度为 400px时 */
        @media screen and (max-width: 400px){
            div {
                background-color: #ecc6c6;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 1.小于540,改变蓝色 */
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }

        /* 2.540~970,改变绿色 */
        @media screen and (min-width: 540px) { /* 后面的样式会重叠当前样式 */
            body {
                background-color: green;
            }
        }
        /* 3.大于970,改为红色*/
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
    </style>
</head>
<body>
</body>
</html>

 

2.2 媒体查询+rem 实现元素大小动态变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top {
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            font-size: .5rem;
            background-color: green;
            color: #FFF;
        }
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
    </style>
</head>
<body>
    <div class="top">购物车</div>
</body>
</html>

 

2.3 媒体查询：引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同的 stylesheets(css文件)，
原理就是直接在 link 中判断设备的尺寸，然后引用不同的 css文件.

  • 建议，媒体查询先写小的，再写大的
语法格式: <link rel="stylesheet" media="mediatype and/not/only (media feature)" href="mystylesheet.css">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" media="screen and (min-width: 600px)" href="style600.css">
    <link rel="stylesheet" media="screen and (min-width: 1000px)" href="style1000.css">
</head>
<body>
    <div>1</div>
    <div>2</div>
</body>
</html>

 

三、less语法

3.1 less介绍

维护 css 的弊端：
(css是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念)

  • css 需要书写大量看似没有逻辑的代码，css 冗余度是比较高的
  • css 不方便维护及扩展，不利于复用
  • css 没有很好的计算能力

Less:
(Leaner Style Sheets的缩写)是一门CSS扩展语言，也成为CSS预处理器，它扩展了css的动态特性。

它在CSS的语法基础之上，引入了变量，Mix(混入)，运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称说的那样，Lss可以让我们用更少的代码做更多的事情。

 
&.安装less:


 

新建 less 后缀文件，在这个 less 文件中书写 less 语句。在webstorm中设置好安装的less后编写 less 文件就会自动编译成 css 文件.

 

3.2 less变量

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

  • 必须有 @ 为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感
@color1: blue;
@font14: 14px;
body {
  background-color: @color1;
}
div {
  background-color: @color1;
  font-size: @font14;
}
a {
  font-size: @font14;
}

 

3.3 less嵌套

1、子元素里面的样式直接写到父元素中

.container {
    width: 200px;
    height: 200px;
    background-color: blue;

    a {
        font-size: 14px;
    }
}

2、伪类、伪元素选择器、交集选择器

  • 内层选择器里面如果没有 & 符号，则它被解析成父选择器的后代.
  • 内层选择器里面如果有 & 符号，则它被解析成父元素自身或父元素的伪类。
.container {
    width: 200px;
    height: 200px;
    background-color: blue;

    a {
        background-color: blue;
        &:hover {
            background-color: green;
        }
    }

	&::before {
        content: "";
    }
    
}

 

3.4 less运算

任何数字、颜色或者变量都可以参与运算。就是 Less 提供了加(+)、减(-)、乘(*)、除(/)算术运算。

  • 运算符中间左右需要有空格进行格开
  • 如果两个值之间只有一个值有单位，则运算结果就取该单位
  • 对于两个不同的单位的值之间进行运算，运算结果的值取第一个值的单位
  • less4.0 之后的除法需要有括号，括号内才能看做是除法，括号外使用时需要用 ./ 来强制运算
@basefont: 50px;
html {
    font-size: @basefont;
}
@border: 5px + 5;
.container {
    width: 200px - 100;
    height: 50px * 2;
    border: @border solid red;
}
img {
    width: 120rem ./ @basefont;
    height: (120rem / @basefont);
}

@import “路径名”
@import 导入的意思可以把一个样式文件导入到另外一个样式文件里面

 

四、rem适配方案

目标:
让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
 
实现:
使用媒体查询根据不同设备按比例设置 html 的字体大小，然后页面元素使用 rem 尺寸单位，当 html 字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配

rem实际开发适配方案：
1、按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size大小; (媒体查询)
2、css 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem单位 的值

 

4.1 方案一：rem+媒体查询+less技术

设计稿常见尺寸宽度:

pc端 rem 适配方案_pc端 rem 适配方案

般情况下，我们以一套或两套效果图适大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以 750 为准。

 
1、动态设置 html 标签 font-size 的大小:

① 假设设计稿是 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
⑨ 但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

2、总结:

① 公式：页面元素的 rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
② 屏幕宽度 / 划分的份数就是html font-size的大小
③ 或者：页面元素的 rem值 = 页面元素值(px) / html font-size字体大小

其实就是：设置 1rem = viewWidth / 10;
设置 1rem 单位为 屏幕的 10分之一，然后对于每种屏幕尺寸都设置好 1rem。页面其它元素就都使用这个尺寸。

 
rem值 = 页面元素值(px) / html font-size字体大小

 

4.2 方案二：rem+flexible.js(推荐)

手淘框架的核心原理就是根据制不同的 width 给网页中 html 根节点设置不同的 font-size,然后所有的 px 都用 rem 来代替，这样就实现了不同大小的屏幕都适应相同的样式了。
 
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。

我们要做的，就是确定好我们当前设备的 html 文字大小就可以了。比如当前设计稿是750px,那么我们只需要把 html 文字大小设置为 75px(750px/10) 就可以里面页面元素 rem值：页面元素的 px值/75。

flexible.js 会根据屏幕大小自动设置 html font-size，也就是屏幕的 10分之一，在使用时将 设计稿的尺寸 / font-size。

部分源码:

// set 1rem = viewWidth / 10
function setRemUnit() {
    var rem = docEl.clientWidth / 10; // 分成 10 份
    docEl.style.fontSize = rem + "px";
}