css布局之响应式布局和bootstrap框架

1.rem单位

em是相对于父元素的字体大小来说的，例：父元素的font-size：10px；子元素的em为10em； 那子元素就是10*10 100个像素点。

而rem相对于的是html元素的，和父元素没关系

例：html指定文字标签未14px

rem为10rem 那这个元素就是10*14=140个像素点。 都是针对的字体大小。

rem优势：可以通过修改html的文字大小来改变页面中元素的大小，也就实现控制整体了。

2.媒体查询

使用@media进行查询，针对不同的媒体类型定义不同的样式。

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

根据浏览器的宽高可重新渲染页面

pc 移动目前都应用较多

声明：@media

@media开头+媒体类型+关键字+（媒体特性） 注意：媒体特性需加上括号。

1.媒体类型

all 所有设备、  print 打印机和预览、 screen 屏幕 PC 平板 手机都可

2.关键字

and:多个媒体特效连接，相当于且

not：字面意思，排除某个媒体类型，相当于非

only：明显就是指定了。

3.媒体特性 

width：可见区域的宽度

max-width：媒体特性，即能达到的最大像素

min-width：和上面的相反，最小像素。

例：

  @media screen and (max-width:800px) and (min-width:540px){

       body{

         background-color: aqua;

       }

     }

540px<=x<=800px 的时候是aqua颜色。

样式层叠性：后面的会覆盖前面的样式，即层叠性。 从小到大写会简便一些。

多个条件时，中间加and连接、数字后面跟单位。

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

引入资源：样式较多的时候可用引入资源。

根据不同屏幕尺寸需要调用不同的css文件时可用。

less基础

css缺陷：

非程序性语言，无变量、函数、scope（作用域）等概念。

不方便维护，复用性不高

没有好的计算能力

以上 所以引申出了less

less：（新语言）

css的扩展语言 也是css预处理器。

在现有的css上增加了程序式语言的特性。

在css基础之上，引入了变量，mixin、运算以及函数。简化了css编写，减低维护成本。其实就是和less名字一样，更少的代码做更多的事。

常见的css处理器：sass、less、stylus。