移动端开发-响应式页面

声明

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

媒体查询

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

一,媒体查询

学习媒体查询的目的：

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

为接下来学的 Bootstrap 做铺垫。

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

代码公式如图:

媒体查询使用场景1-

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

媒体查询使用场景2-

元素的显示和隐藏

媒体查询使用场景3

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

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

      <!-- 默认显示pc端 --><link rel="stylesheet" href="./css/pc.css"><!-- ipd端 屏幕992以下 --><link rel="stylesheet" href="./css/ipd.css" media="(max-width:992px)"><!-- m端 屏幕为768以下 --><link rel="stylesheet" href="./css/m.css" media="(max-width:768px)">

注意:媒体查询在书写时,注意顺序(防止css的层叠性进行覆盖)

总结:768px以下表示移动端 992px以上表示平板电脑 1200px以下表示pc端(中屏) 1200px以上表示pc端 (大屏)

二,Bootstrap

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网: Bootstrap中文网

下载安装包。

开发中，我们都是按需导入，简单理解，需要用到啥，我们复制那个文件，没有必要都放入，提高性能。

使用步骤：

复制 css文件

并且引入到html文件中

2.复制字体图标文件夹

3.如果需要js，则复制js文件，并引入html文件中

4.使用内部预定义好的类(调用版心)即可。

    <!-- 响应式通栏盒子 --><div class="container-fluid">响应式通栏盒子</div>

三,栅格系统

栅格系统(gridsystems),也叫“网格系统，它就是通过一系列的行（row）与列（column）的组合创建页面布局。

简单说，栅格系统也是一种布局方式。 BootStrap 给咱们内置好了一套布局系统。

BootStrap3默认将网页分成12等份

比如，超大屏幕下我们想要一个通栏的大盒子

超大屏幕下，我们再来一行左右来分

超大屏下，如果一行放4个，怎么做呢？

如果实现不同屏幕下，不同的显示个数，可以通过使用不同类名。

还是这4个盒子，如果在中等屏幕下放3个怎么做呢？

如果在小屏幕下放2个

超小屏幕放一个

(#^.^#)学废了吗?

四,row 类

row 清除左右15px的内边距,通过左右外边距清除

五,列偏移

列偏移通过 col-lg-offset-*

让盒子往右侧走

 .first div {height: 100px;background-color: pink;}.second div {background-color: purple;height: 100px;}.third div {height: 100px;background-color: skyblue;}

<div class="container"><div class="row first"><div class="col-lg-4">左侧</div><div class="col-lg-4 col-lg-offset-4">右侧</div></div><div class="row second"><div class="col-lg-3 col-lg-offset-3">1侧</div><div class="col-lg-3 col-lg-offset-3">2侧</div></div><div class="row third"><div class="col-lg-6 col-lg-offset-3"></div></div></div>

效果如图:

六,列嵌套

一个盒子里面可以再嵌套其他的盒子，但是站在这个盒子的角度来看，他又分为了12份。

.container .row div {height: 100px;background-color: pink;}

<div class="container"><div class="row"><div class="col-lg-4"><p class="col-lg-6">登录</p><p class="col-lg-6">注册</p></div><div class="col-lg-4">2</div><div class="col-lg-4">3</div></div></div>

效果图: