1. rem 基础

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

比如，根元素（html）设置font-size:12px;非根元素设置width:2rem;则换算为px表示为24px

em 单位是相对于父元素来说的，若父元素指定了font-size:12px，子元素width:10em;那么换算成px就是宽度是120px

rem优势

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

2. 媒体查询

媒体查询（Media Query）是CSS3新语法

2.1 什么是媒体查询

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

2.2 语法规范

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

用 @media 开头，注意符号@
mediatype 媒体类型
关键字 and not only
media feature 媒体特性，必须有小括号

2.2.1 mediatype 查询类型

将不同的终端设备划分为不同的类型，称为媒体类型

值	说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕、平板电脑、智能手机等

2.2.2 关键字

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

值	说明
and	将多个媒体特性连接到一起
not	排除某个媒体类型（可省略）
only	指定某个特定的媒体类型（可省略）

2.2.3 媒体特性

每种媒体特性都具体各自不同的特征，根据不同媒体类型的媒体特性设置不同的展示风格，这里暂时只学习3个。注意要用小括号

值	说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域的宽度
max-width	定义输出设备中页面最大页面区域的宽度

2.3 媒体查询+rem实现元素动态改变大小

rem单位是跟着html走的，有了rem页面元素可以设置不同大小尺寸，媒体查询是根据不同设备宽度走的

媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态改变

2.4 引入资源

当样式比较繁多的时候，可以针对于不同的媒体使用不同的stylesheets(样式表)

原理：在link引入时判断设备的尺寸，然后引入不同的css文件

2.4.1 语法规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style.css">

3. less基础

3.1 维护 css 的弊端

CSS 是一门非程序式的语言，没有变量、函数、scope（作用域）等概念

CSS 需要书写大量看似没有逻辑的代码，CSS的冗余度是很高的
不方便维护及扩展，不利于复用
CSS 没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好并易于维护的CSS项目

3.2 Less 介绍

Less（Leaner Style Sheets）是一门 CSS 扩展语言，也称为 CSS 预处理器

作为CSS的一种形式的扩展，他并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入了程序式语言的特性。它在CSS的语法基础上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并降低了CSS的维护成本。

Less中文地址：http://lesscss.cn/

常见的CSS预处理器：Sass、Less、Stylus

3.3 Less安装

安装nodejs，网址：http://nodejs.cn/download/
基于nodejs安装Less，npm install -g less
检查是否安装成功lessc -v

3.4 Less变量

变量是指没有固定的值，可以改变的，我们CSS中的一些颜色和数值就可以使用变量

@变量名:值;

3.4.1 变量命名规范

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

3.5 Less编译

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

可以通过vscode的less插件Easy LESS将less文件编译为css文件

3.6 Less嵌套

在Less中写嵌套可以直接在父元素的样式表中写子元素的样式表，例如：

.header{
    width: 100px;
    height: 100px;
  	// 子元素直接写在父元素里面
    .a{
        font-size:12px;
    }
}

如果遇到（交集|伪类|伪元素选择器）

内容选择器前面没有&符号，被解析为父选择器的后代
如果有&符号，被解析为父元素自身或者父元素的伪类

例如：

.header{
    width: 100px;
    height: 100px;
  	// 子元素直接写在父元素里面
    .a{
        font-size:12px;
       	// 加上&符号才会认为是伪类或者伪元素选择器
        &:hover{
            color:green;
        }
    }
}

3.7 less运算

任何数字、颜色或者变量都可以参与到运算中，Less提供了运算：加（+）减（-）乘（*）除（/）

//less里面这么写
@width: 10px + 5;
div{
    border:@width solid red;
}
//这是css
div{
    border:15px solid red;
}
// Less甚至可以这么写
@width2:(@width + 5) * 2;

less运算符左右需要有空格隔开
两个数参与运算，只有一个数有单位，那么就以这个单位为准
两个数参与运算，两个数都有单位且不同，那么以前一个数的单位为准

4. rem适配方案

让一些不能等比自适应的元素，达到当设备尺寸发生变化时，等比例适配设备
使用媒体查询根据不同设备的尺寸设置html的字体大小，全局使用rem单位，当html的字体大小改变，全局元素的大小也改变，以此来达到等比例适配缩放。

4.1 rem实际开发适配方案

按照设计稿与设备宽度的比例，动态计算并设置html标签的font-size大小（媒体查询）
CSS中，设计稿的宽、高、相对应取值，按照同比例换算为rem为单位的值

4.2 rem适配方案技术使用

技术方案1

less
媒体查询
rem

技术方案2（推荐）

flexible.js
rem

4.3 rem实际开发适配案例1

rem+媒体查询+rem

4.3.1 设计稿常见尺寸宽度

设备	常见宽度
iPhone 4/5	640px
iPhone 6/7/8	750px
Android	常见320px、360px、375px、384px、400px、720px、1080px等等

一般情况下，我们以一套或者两套效果图适应大部分的屏幕，放弃一些极端屏牺牲一些效果。

4.3.2 不同设备下的字体大小

假如设计稿是750px
假如我们把屏幕划分为15等份（划分标准不一，可以是20份也可以是15份）
每一份作为html字体大小，这里是50px
那么在320px设备的时候，字体大小为320/15，也就是21.33px
用我们页面元素的大小除以不同的html字体大小会发现比例其实是相同的
比如我们以750px作为标准设计稿
一个100*100像素的页面元素在750屏幕下，就是100/50转换为rem就是2rem
320屏幕下，html字体是21.33，则rem就是42.66，此时宽高是42.66，比例还是1:1
这样能实现在不同的屏幕下，盒子等比例缩放但是样式不会乱的效果

4.3.3 元素取值方法

最后公式：页面元素的rem值 = 页面元素值（px）/（屏幕宽度/划分的份数）
屏幕宽度/划分的份数就是html的font-size大小
或者：页面元素的rem值=页面元素值（px）/html font-size字体大小

5. 苏宁手机端案例

5.1 技术选型

方案：采用单独制作移动端页面方案

技术：采用rem适配布局（less+rem+媒体查询）

设计图：采用750px设计尺寸

5.2 建立文件夹

images（存放固定图片）
upload（存放产品图片）
css（存放样式表）
index.html

5.3 视口标签和normalize.css

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0" />

<link rel="stylesheet" href="css/normalize.css" />

5.4 设置公共的common.less

新建common.less，设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小
我们关心的尺寸有320px，360px，375px，384px，400px，414px，424px，480px，540px，720px，750px
划分的份数暂时定为15等份
默认html字体大小50px，这句话写在最上面

5.5 新建index.less文件

新建index.less 这里面写首页样式
将刚才设置好的common.less引入到index.less里面，语法如下：

// 将common.less导入到index.less中
@import "common.less";

5.6 body样式

苏宁原版

body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background-color: #f2f2f2;
}

Files

1-rem布局.md

Latest commit

History