＜移动Web开发＞__rem布局&响应式布局的完美总结

目录

一、rem单位

二、媒体查询

三、rem适配方案

1.rem 适配方案-1

2.rem 适配方案-2

四、响应式开发原理

1.响应式开发原理

2.响应式布局容器 

五、Bootstrap 介绍

六、Bootstrap 使用四部曲

1.创建文件夹结构

2.创建 html 骨架结构

3.引入相关样式文件

4.书写内容

七、bootstrap布局容器

八、bootstrap 栅格系统 

1. 栅格嵌套

2.列偏移

3. 列排序

九、响应式工具

十、总结

一、rem单位

---

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。

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

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

/* 根html 为 12px */
html {
   font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */       
div {
    font-size: 2rem;
}

rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

二、媒体查询

---

 媒体查询语法

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

三、rem适配方案

---

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

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

技术方案：

1. less+rem+媒体查询
2. flexible.js+rem

1.rem 适配方案-1

 2.rem 适配方案-2

四、响应式开发原理

---

1.响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。