移动端开发-响应式页面

声明

现在开发中，响应式页面使用地会比较少。今天对我们来说，最大的收获是： 学会如何去使用前端 UI 框架。

媒体查询

Bootstrap 框架，学会怎么去用，而不是怎么去做东西，因为后面有更好的框架： 饿了吗 和 vant

---

一,媒体查询

学习媒体查询的目的：

     了解如何使用媒体查询做响应式页面。

      为接下来学的 Bootstrap 做铺垫。

      理解:max-width 最大值不能超过这个值 max-width 最小值不能小过这个值

代码公式如图:

 

媒体查询使用场景1-

约束移动端不要超过规定大小

 

媒体查询使用场景2-

元素的显示和隐藏

媒体查询使用场景3

响应式原理:通过@media媒体标签判断屏幕大小, 让盒子在不同宽度呈现不同的摆放顺序

 

响应式布局外链式: 方便后面进行响应式开发时,后期维护进行区分端口

      <!--