web前端-移动web开发-rem布局、媒体查询、less

rem

1.页面布局文字会随着页面大小的变化而变化

2.流式布局和flex布局主要是针对于宽度，而rem布局可以对宽度和高度都进行布局

3.屏幕发生变化时，元素的宽度和高度都进行等比例缩放

rem（font size of the root element）是指相对于根元素（html）的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
 

这里先解释下em，下面代码中p的宽高均为120px

下面是rem的用法，元素都相对于html，随着页面的缩放元素也等比例缩放

媒体查询

媒体查询可以根据不同的屏幕尺寸来改变不同的样式

rem+媒体查询

可以实现响应式布局

		

		

			导航
		

媒体查询：引入资源

根据不同的屏幕设置不同的css样式

		
		
		
		
		

		
1
		
2

less基础

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。http://lesscss.cn/

要使用less先安装node。     http://nodejs.cn/download/

在less环境下安装node命令 。  $ npm install -g less

检测node是否安装成功 node -v

检测less是否安装成功 lessc -v

• less变量

  @color:pink;
  body{
      background-color: @color;
  }
  div{
      background-color: @color;
  }

  我们需要把less文件编译转换成为css文件，我们才能够使用

• less可以这样嵌套的写，子元素的样式直接写在父元素中

  body{
      background-color: red;
      div{
          background-color: pink;
      }
  }

   

• less中的伪类

• body{
      background-color: red;
      div{
          &:hover{
              background-color: pink;
          }
      }
  }

• less中的计算

  div{
      width: 200px + 50;
      height: 200px * 2;
  }
  img{
      width: 82 / 50px;
  }

  运算符左右两侧都要空格。如果两个都有单位的数参与运算，则运算结果的值取第一个数的单位。

rem适配方案

• rem+less+媒体查询

 

• flexible+rem（简洁高效）

flexible把当前窗口划分为十等份