移动WEB开发的rem布局、Less使用

移动WEB开发的rem布局

目标(目录)

  1. 能够使用rem单位

  2. 能够使用媒体查询的基本语法

  3. 能够使用Less的基本语法

  4. 能够使用Less中的嵌套

  5. 能够使用Less中的运算

  6. 能够使用2种rem适配方案

思考:1、页面布局文字能够随着屏幕大小的变化而变化?

2、流式布局和flex布局主要针对于宽度布局,那高度如何设置?

3、怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放?

一、rem的基础?

rem(root em)是一个相对单位,

类似于em,em是父元素字体大小 ,2em 相当于将父元素字体放大两倍

代码演示:

div{

font-size: 12px;

}

p {

width: 5em;

height: 5em;

/* 运行 width: 60px、height:60px */

background-color: aqua;

}

        

 

 

有图为证

 

移动WEB开发的rem布局、Less使用_第1张图片

 

 

不同的是rem的基准是相对于html元素的字体大小

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

代码演示:

html{

font-size: 12px;

}

p {

width: 6rem;

height: 6rem;

/* 运行 width: 72px、height:72px */

background-color: aqua;

}

        

 

有图为证:

 

移动WEB开发的rem布局、Less使用_第2张图片

 

 

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

二、媒体查询

什么是媒体查询

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

  • 使用@media查询,可以针对不同的媒体类型定义不同的样式

  • @media可以针对不同的屏幕尺寸设置不同的样式

  • 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

媒体查询最好从小到大宽度的书写

语法规范

@media mediatype and|not|only (media feature){

CSS-Code;

}

  • 用@media开头 注意“@”符号 声明媒体查询

  • mediatype 媒体类型 属于哪一种类型,打印机还是手机屏幕

  • 关键字 and not only

  • media feature 媒体特征 必须要有小括号包裹

1、mediatype 查询类型

属性值:

(1)all:适用于所有设备

(2)print:用于打印机和打印预览

(3)screen:用于电脑屏幕,平板电脑,智能手机等

2、关键字 and|not|only

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

  • and:可以将多个媒体特性连接在一起,相当于“且”

  • not:排除某个媒体类型,相当于“非”

  • only:指定某个特定的媒体类型

3、媒体特性

每个媒体类型都包含各自不同的特性,根据不同的媒体类型的媒体特性设置不同的展示风格

属性值:

width:定义输出设备中页面可见区域的宽度

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

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

代码演示:

@media screen and (max-width: 600px){

/* 设置css样式 */

body{

background-color: green;

}

}

意思:在屏幕上,最大的宽度是600px ,设置body的背景颜色为绿色

max-width: 600px 小于等于600px的意思。

多个条件加and连接

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

媒体查询+rem实现不同设备宽度,实现页面元素大小的动态变化

案例:当屏幕变小时,页面宽高变小,字体变小;当屏幕变大时,页面宽高变大,字体变大

@media screen and (min-width: 320px){{

html{

font-size: 50px;

}

}

@media screen and (min-width: 640px){

html{

font-size: 100px;

}

}

.top{

height: 1rem;

font-size: 0.5rem;

background-color: rgb(33, 192, 179);

color: grey;

}

        购物车

 

引入资源

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

即直接在link中判断设备的尺寸,然后引用不同的css文件

语法规范

三、Less基础

Less介绍

Less(Learner Style Sheets)是一门CSS扩展语言,也称CSS预处理器

Less是一门CSS预处理语言,它扩展了CSS的动态特性。

它的CSS的语言基础之上,引入变量、Mixin(混入)、运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本。

Less中文网址:http://lesscss.cn/

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

Less安装
  1. 安装node.js,网址:http://nodejs.cn/download/

    安装就是一直点next

  2. 检查是否安装成功,使用cmd命令(win10:window+r 打开运行输入cmd)——输入“node -v”查看版本即可

  3. 基于nodejs在线安装Less,使用cmd命令“npm install -g less”即可

  4. 检查是否安装成功,使用cmd命令“lessc -v”查看版本

 

移动WEB开发的rem布局、Less使用_第3张图片

 

 

 

Less的使用

先建一个后缀名为“.less”的文件,在这个less文件里面书写less语句

  1. Less变量

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

@变量名:值;

命名规则

  • 必须要@为前缀

  • 不能包含特殊字符

  • 不能以数字开头

  • 区分大小写

例如:错误的变量名:@2color、@color~@#

先定义变量,然后下方某个元素使用变量

2、Less编译

Less包含一套自定义的语法及一个解析器,用户根据这个语法定义自己的样式规则,这些规则最终通过解析器,编译生成相应的CSS文件

将less文件,编译成css文件。

利用vscode less插件,插件名为Easy LESS。

在vxcode商店里面搜索Easy LESS,安装,然后重新加载vscode,只要保存一下less文件,会自动生成CSS文件。

3、Less嵌套

子元素的样式直接写在父元素的样式里面

@color:pink;

@font14: 14px;

body{

background-color: @color;

}

div{

color: @color;

font-size: @font14;

a{

color: @color;

}

}

如果遇见(交集|伪类|伪元素选择器)

  • 内层选择器的前面没有&符号,则它被解析为父选择器的后代

  • 如果有&符号,它就被解析为父元素自身或父元素的伪类、伪元素

less文件内容

@color:pink;

@color1:blue;

@font14: 14px;

body{

background-color: @color;

}

div{

color: @color;

font-size: @font14;

a{

color: @color;

&:hover{

color: @color1;

}

}

&::before{

content: "";

font-size: @font14;

}

}

less编译后的css样式

body {

background-color: pink;

}

div {

color: pink;

font-size: 14px;

}

div a {

color: pink;

}

div a:hover {

color: blue;

}

div::before {

content: "";

font-size: 14px;

}

3、Less运算

  • 乘号(*)和除号(/)的写法

  • 运算符中间左右有个空格隔开1px + 5

  • 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位

  • 如果两个值之间只有一个值有单位,运算结果就取该单位

Less文件

@border: 5px +5;

// 若没有空格隔开

div{

width: 200px -50;

height: (200px + 5)*2;

border: @border solid red;

background-color: #666 - #222;

}

编译后的css样式

div {

width: 200px -50;

height: 410px;

border: 5px 5 solid red;

/* border 的边没有变成10px */

background-color: #444444;

}

 

rem适配方案

适配目标:

1、让一些不能等比例自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备

2、使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化时,元素尺寸也会发生变化,从而达到等比例缩放的适配。

技术使用(市场主流)

技术方案1

  • less

  • 媒体查询

  • rem

技术方案2

  • flexible.js

  • rem

总结:

1、两种方案都存在

2、方案二更简单

技术方案一

1、设计稿常见尺寸宽度

基本以750px为准

iPhone 4.5:640px

iPhone 678:750px

Android:常见320px、360px、375px、384px、400px、414px、500px、720px

2、动态设置html标签font-size大小

(1)假设设计稿时750px

(2)假设把屏幕划分为15等份(划分标准不一,可以20份)

(3)每一份作为html字体大小,这里就是50px

(4)那么在320px设备的时候,字体大小就是320px/15,即21.33px

3、元素大小取值方式

(1)公式:页面元素的rem值 = 页面元素值(px)/ (屏幕宽度 / 划分的分数)

(2)屏幕宽度 / 划分的份数 就是html 的font-size的大小

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

# 移动WEB开发的rem布局
### 目标(目录)
1. 能够使用rem单位2. 能够使用媒体查询的基本语法3. 能够使用Less的基本语法4. 能够使用Less中的嵌套5. 能够使用Less中的运算6. 能够使用2种rem适配方案
思考:1、页面布局文字能够随着屏幕大小的变化而变化?
​2、流式布局和flex布局主要针对于宽度布局,那高度如何设置?
​3、怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放?
### 一、rem的基础?
rem(root em)是一个相对单位,
类似于em,em是父元素字体大小 ,2em 相当于将父元素字体放大两倍
代码演示:
```cssdiv{
​      font-size: 12px;
​    }
​    p {
​      width: 5em;  
​      height: 5em;
​      /* 运行 width: 60px、height:60px */
​      background-color: aqua;
​    }

       

```


有图为证![在这里插入图片描述](https://img-blog.csdnimg.cn/20200715113633145.png)
不同的是rem的基准是相对于html元素的字体大小
比如根元素(html)设置font-size = 12px,非根元素设置width:2em则换成px表示就是24px
代码演示:
```csshtml{
​      font-size: 12px;
​    }
​    p {
​      width: 6rem;  
​      height: 6rem;
​      /* 运行 width: 72px、height:72px */
​      background-color: aqua;
​    }
       

```
有图为证:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200715113719664.png)

**rem的优点:** 可以通过修改html里面的文字大小来改变页面中的元素的大小,可以整体控制
### 二、媒体查询
###### 什么是媒体查询
媒体查询(Media Query)是CSS3新语法
- 使用@media查询,可以针对不同的媒体类型定义不同的样式- @media可以针对不同的屏幕尺寸设置不同的样式- 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
媒体查询最好从小到大宽度的书写
###### 语法规范
```css@media mediatype and|not|only (media feature){
​      CSS-Code;
​    }```
- 用@media开头 注意“@”符号  声明媒体查询- mediatype 媒体类型   属于哪一种类型,打印机还是手机屏幕- 关键字 and  not  only   - media feature 媒体特征 必须要有小括号包裹  
1、mediatype 查询类型
属性值:
(1)all:适用于所有设备
(2)print:用于打印机和打印预览
(3)screen:用于电脑屏幕,平板电脑,智能手机等
2、关键字 and|not|only
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
- and:可以将多个媒体特性连接在一起,相当于“且”- not:排除某个媒体类型,相当于“非”- only:指定某个特定的媒体类型
3、媒体特性
每个媒体类型都包含各自不同的特性,根据不同的媒体类型的媒体特性设置不同的展示风格
属性值:
width:定义输出设备中页面可见区域的宽度
min-width:定义输出设备中页面最小可见区域宽度
max-width:定义输出设备中页面最大可见区域宽度
代码演示:
```css@media screen and (max-width: 600px){
​      /* 设置css样式 */
​      body{
​        background-color: green;
​      }
​    }```
意思:在屏幕上,最大的宽度是600px ,设置body的背景颜色为绿色
max-width: 600px 小于等于600px的意思。
多个条件加and连接
###### 媒体查询+rem实现元素动态大小变化
媒体查询+rem实现不同设备宽度,实现页面元素大小的动态变化
案例:当屏幕变小时,页面宽高变小,字体变小;当屏幕变大时,页面宽高变大,字体变大
```css@media screen and (min-width: 320px){{
​      html{
​        font-size: 50px;
​      }
​    }
​    @media screen and (min-width: 640px){
​      html{
​        font-size: 100px;
​      }
​    }
​    .top{
​      height: 1rem;
​      font-size: 0.5rem;
​      background-color: rgb(33, 192, 179);
​      color: grey;
​    }```
```css
        购物车
```


###### 引入资源
当样式比较繁多的时候,可以针对不同的媒体使用不同的stylesheets(样式表)
即直接在link中判断设备的尺寸,然后引用不同的css文件
语法规范
`
```css`
```
### 三、Less基础
###### Less介绍
Less(Learner Style Sheets)是一门CSS扩展语言,也称CSS预处理器
Less是一门CSS预处理语言,它扩展了CSS的动态特性。
它的CSS的语言基础之上,引入变量、Mixin(混入)、运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本。
Less中文网址:http://lesscss.cn/
常见的CSS预处理器:Sass、Less、Stylus
###### Less安装
1. 安装node.js,网址:http://nodejs.cn/download/
   安装就是一直点next
2. 检查是否安装成功,使用cmd命令(win10:window+r 打开运行输入cmd)——输入“node -v”查看版本即可
3. 基于nodejs在线安装Less,使用cmd命令“npm install -g less”即可
4. 检查是否安装成功,使用cmd命令“lessc -v”查看版本
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200715115217762.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlaWxlaV9fNjY=,size_16,color_FFFFFF,t_70)

###### Less的使用
先建一个后缀名为“.less”的文件,在这个less文件里面书写less语句
1. Less变量
变量是指没有固定的值,可以改变的,因为CSS中的一些颜色和数值经常使用。
`@变量名:值;`
**命名规则**
- 必须要@为前缀- 不能包含特殊字符- 不能以数字开头- 区分大小写
例如:错误的变量名:@2color、@color~@#
先定义变量,然后下方某个元素使用变量
2、Less编译
Less包含一套自定义的语法及一个解析器,用户根据这个语法定义自己的样式规则,这些规则最终通过解析器,编译生成相应的CSS文件
将less文件,编译成css文件。
利用vscode less插件,插件名为Easy LESS。
在vxcode商店里面搜索Easy LESS,安装,然后重新加载vscode,只要保存一下less文件,会自动生成CSS文件。
3、Less嵌套
子元素的样式直接写在父元素的样式里面
```css@color:pink;
@font14: 14px;
body{
  background-color: @color;
}
div{
  color: @color;
  font-size: @font14;
  a{
​    color: @color;
  }
}```
如果遇见(交集|伪类|伪元素选择器)
- 内层选择器的前面没有&符号,则它被解析为父选择器的后代- 如果有&符号,它就被解析为父元素自身或父元素的伪类、伪元素
less文件内容
```css@color:pink;
@color1:blue;
@font14: 14px;
body{
  background-color: @color;
}
div{
  color: @color;
  font-size: @font14;
  a{
​    color: @color;
​    &:hover{
​      color: @color1;
​    }
  }
  &::before{
​    content: "";
​    font-size: @font14;
  }
}
less编译后的css样式
body {
 background-color: pink;
}
div {
 color: pink;
 font-size: 14px;
}
div a {
 color: pink;
}
div a:hover {
 color: blue;
}
div::before {
 content: "";
 font-size: 14px;
}```


3、Less运算
- 乘号(*)和除号(/)的写法- 运算符中间左右有个空格隔开1px + 5- 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位- 如果两个值之间只有一个值有单位,运算结果就取该单位
Less文件
```css@border: 5px +5;
// 若没有空格隔开
div{
  width: 200px -50;
  height: (200px + 5)*2;
  border: @border solid red;
background-color: #666 - #222;
}```
编译后的css样式
```cssdiv {
 width: 200px -50;
 height: 410px;
 border: 5px 5 solid red;
 /* border 的边没有变成10px */
background-color: #444444;
}```


### rem适配方案
适配目标:
1、让一些不能等比例自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备
2、使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化时,元素尺寸也会发生变化,从而达到等比例缩放的适配。
###### 技术使用(市场主流)
**技术方案1**
- less- 媒体查询- rem
**技术方案2**
- flexible.js- rem
总结:
1、两种方案都存在
2、方案二更简单

###### 技术方案一
1、设计稿常见尺寸宽度
基本以750px为准
iPhone 4.5:640px
iPhone 678:750px
Android:常见320px、360px、375px、384px、400px、414px、500px、720px
2、动态设置html标签font-size大小
(1)假设设计稿时750px
(2)假设把屏幕划分为15等份(划分标准不一,可以20份)
(3)每一份作为html字体大小,这里就是50px
(4)那么在320px设备的时候,字体大小就是320px/15,即21.33px
3、元素大小取值方式
(1)公式:页面元素的rem值 = 页面元素值(px)/ (屏幕宽度 / 划分的分数)
(2)屏幕宽度 / 划分的份数 就是html 的font-size的大小
(3)或:页面元素的rem值 = 页面元素值(px) / html 的font-size字体大小

你可能感兴趣的:(移动WEB开发的rem布局、Less使用)