css►mobile

rem,less

为什么要用rem？

rem的主要目的就是解决用于不同屏幕的适配问题。rem能够等比例的适配所有的屏幕。

1
单纯使用流式布局的结果是宽度自适应  高度是写死的  导致不能完全适配设计图(因为不同的屏幕大小下 高度永远是写死的), 而使用rem就可以让高度也保持自适应效果
  • 流式布局：虽然可以让各种屏幕都适配，但是显示效果不是很好，因为只有几个尺寸的手机能够完美的显示出来视觉设计师和交互最想要的效果。但是目前使用流式布局的公司非常多，比如 亚马逊 、京东 、携程
  • rem布局：rem能够适配所有的屏幕，与less配合使用效果会更好。目前使用rem布局的有：淘宝 、 苏宁

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。它是一个相对单位。

1
2
3
既然是一个单位, 而px也是一个单位   所以但凡是使用px的地方都可以使用rem来代替  而rem单位的大小永远参照的是html的font-size值   1rem = html的font-size的大小

特点: 一旦html的font-size发生了改变  那么rem的大小也会发生改变

rem与高度自适应

因为rem的基准点是根元素html的字体大小，因此我们只需要设置不同屏幕的html的font-size大小不一样就可以达到不同屏幕的适配了。

媒体查询

媒体查询（Media Query）是CSS3提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
根据不同的屏幕大小去加载不同的css样式

语法说明:

media screen (条件) {
    满足条件加载的css内容
}

// 条件说明
1. min-width: 320px =>  最小宽为320 (320以上的设备)
2. max-width: 640px =>  最大宽为640 (640以下的设备)
3. width: 540px     =>  宽度等于540

and连接符 => 可以查询多个多个条件

rem与媒体查询

使用rem配合媒体查询可以适配多个终端

1
2
3
4
5
需求：基于750的设计图自定义 html的font-size为50 ,里面得到的盒子的大小为100px 100px 改写成rem 可以实现在主流手机里面宽高自适应 
主流手机机型：320 360 375 384 400 414 424 480 540 720 750

px转换成rem的公式: px/html的font-size值 
动态计算不同屏幕对应的html的font-size值公式:  当前屏幕/(设计图的宽 / 基于这个设计图的html的fontsize)

LESS

Less简介

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。

浏览器不直接识别less文件，浏览器只识别css文件，所以我们写了less文件之后，我们需要预先把less文件转换成css文件。

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

less仅仅是写css的另一种方式，写出来的less文件浏览器也不识别。所以，写完了less文件，还需要通过less解析器解析成css，最终浏览器引入的还是css文件。

官网
中文网

less的编译

如何把less文件变成css文件

  1. 安装easy less插件
1
2
3
4
和前面的内容需要使用 ,
"less.compile": {
  "out": "../css/"
}
  1. 使用webpack打包的时候用less-loader处理

Less语法

less初体验

注释

1
2
/*这个注释是CSS中的注释，因此会编译到css中*/
//这个注释,CSS中用不了，因此不会编译出来。

变量

1
2
3
4
5
6
7
8
9
10
@wjs_color:#e92322;
body {
  background-color: @wjs_color;
}

div {
  width: 400px;
  height: 400px;
  border: 1px solid @wjs_color;
}

嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

  • 使用伪类的时候 可以使用& 表示父选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
@charset "UTF-8";
.wjs_header {
  border-bottom: 1px solid #ccc;
}
.wjs_header .header_item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-left: 1px solid #ccc;
}
.wjs_header .header_item:first-child {
  border-left: none;
}

less数学运算

在我们的 CSS 中充斥着大量的数值型的 value，less可以直接支持运算，也提供了一系列的函数提供给我们使用。

less函数

函数：可以重复使用

不带参数的函数

1
2
3
4
5
6
7
8
9
10
11
@charset "UTF-8";

//不会被编译
.btn() {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
.my_btn {
  .btn();
}

带参数的函数

1
2
3
4
5
6
7
8
9
.btn_border(@width) {
  border: @width solid #000;
}
.my_btn {
  //如果函数定义了参数，调用的时候必须传入参数，否则会报错
  .btn_border();
  //传入参数，就不会报错
  .btn_border(10px);
}
1
2
3
4
5
6
7
8
9
10
//js中函数的默认值设置方法是等号，不要混淆
.btn_border(@width:1px) {
  border: @width solid #000;
}
.my_btn {
  //因为有默认值，所以不会报错
  .btn_border();
  //传入参数，会覆盖1px，也不会报错
  .btn_border(10px);
}