HTML——响应式布局

响应式布局

何为响应式布局

响应式布局（Responsive design），意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

如何制作响应式布局

一、rem布局
1.em相对于父元素的字体大小而言；rem是相对于html的字体大小而言
2.优势：可以通过修改html的文字大小来改变整个页面中元素大小，实现整体控制
二、@media媒体查询：针对不同的屏幕尺寸设置不同的样式
1.语法： @media mediatype and|not|only （media feature）{ CSS-Code； }

①mediatype查询类型：all（所有设备）、print（打印机和打印预览）、screen（电脑屏幕、平板电脑、智能手机）
②关键字：and（多个媒体设备连接在一起）、not（排除某个设备，可省略）、only（指定某个设备，可省略
③media feature媒体特性（要用小括号包含）：width、max-width、min-width

2.rem和@media媒体查询相结合，不同的设备设置不同的html文字大小
3.引入资源：针对不同的屏幕尺寸调用不同的css文件（最好的方法是从小到大） link rel=“stylesheet” href=".css" media=“mediatype and|not|only （media feature）”>
三、栅格系统
1.把页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
2.

①行必须放到container容器里
②实现列的划分需要给列加类前缀
③列大于12，多余的列将会作为整体另起一行
④xs-超小；sm-小；md-中等；lg-大
⑤<768px–width:100%;height:.col-xs-; >=768px–width:750px;height:.col-sm-; >=992px–width:970px;height:.col-md-; >=1200px–width:1170px;height:.col-lg-;
⑥可以同时为一列指定多个设备类名，以便划分不同的份数。如class=“col-md-4 col-sm-6”
⑦每一列默认有左右15px的padding（可用css强制去掉）

3.列嵌套：栅格系统内置的栅格系统将内容再次嵌套，一个列内再分成若干个小列。（列嵌套最好加个行row，这样可以取消父元素的padding，且高度自动和父级一样高）
4.列偏移：col-md-offset-（偏移的份数是12-两个盒子的份数）；如果只有一个盒子且想要居中，则偏移（12-盒子的份数）/2
5.列排序：col-md-push-：推。col-md-pull-：拉。
6.响应式工具：利用媒体查询，针对不同设备进行展示或隐藏内容隐藏：hidden-xs/sm/md/lg 显示：visible-xs/sm/md/lg

响应式布局简单案例

当网页页面在正常情况下如下图所示在一行上排列

当网页页面缩小到767px甚至以下时，整体布局方式发生改变，如下图所示。

首先先用ul和li设置几个导航栏盒子，宽度为750px，每个li宽度为93.75px，左浮动，在正常页面时正常排列。当页面缩小时，我们需要利用媒体查询额外设置样式，整个ul宽度为页面的100%，每个li宽度为33.33%。

<div class="container"><ul><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li></ul></div>

* {margin: 0;padding: 0;box-sizing: border-box;}.container {margin: 0 auto;width: 750px;}li {list-style: none;float: left;width: 93.75px;height: 2rem;line-height: 2rem;text-align: center;color: white;background-color: green;}@media screen and (max-width:767px) {.container {width: 100%;}li {width: 33.33%;}}

栅格布局简单案例

声明与引入样式

<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><!-- 引入bootstarp样式 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

整体css样式

* {box-sizing: border-box;}[class^=col] {border: 1px solid #ccc;}.container .row:nth-child(1) {background-color: pink;}.container .row>div {height: 50px;background-color: pink;/* 想要子盒子之间有空隙，不能使用margin，因为栅格系统原理是把子盒子width平均分配，用float:left浮动一行显示，因此加了margin后会掉下去 */}

一、如果孩子的份数相加等于12，则会占满整个.container的宽度，如果没设置相应页面的份数，则孩子会直接占满一行。

<div class="row"><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div></div>
<div class="row"><div class="col-lg-6">1</div><div class="col-lg-2">2</div><div class="col-lg-2">3</div><div class="col-lg-2">4</div></div>

二、如果孩子的份数相加小于12，则会占不满整个.container的宽度，会有空白。

<div class="row"><div class="col-lg-6">1</div><div class="col-lg-2">2</div><div class="col-lg-2">3</div><div class="col-lg-1">4</div></div>

三、如果孩子的份数相加大于12，则多的那一列会另起一行。

<div class="row"><div class="col-lg-6">1</div><div class="col-lg-2">2</div><div class="col-lg-2">3</div><div class="col-lg-3">4</div></div>

四、列嵌套：一个孩子里嵌套孩子

<div class="row"><div class="col-md-4"><div class="row"><!-- 这里的参数以父盒子.col-md-4为准，相当于父盒子内又划分12等宽的列 --><div class="col-md-6">a</div><div class="col-md-6">b</div></div></div><div class="col-md-4">2</div><div class="col-md-4">3</div></div>

嵌套最好添加row，不但可以消除父盒子的padding影响，还能让子盒子继承父盒子的高度。下图为没添加row时的效果。

五、列偏移

<div class="row"><div class="col-md-4">左边</div><!-- 偏移的份数是 12减去两个盒子的份数8=4 --><div class="col-md-4 col-md-offset-4">右边</div></div>

如果只有一个盒子且想要居中，则偏移（12-盒子的份数）/2

<div class="row"><div class="col-md-8 col-md-offset-2">我是中间的</div>
</div>

六、列排序
col-md-push-：推到右边。col-md-pull-：拉往左边

<div class="row"><div class="col-md-4 col-md-push-8">左边想去右侧</div><div class="col-md-8 col-md-pull-4">右边想去左侧</div></div>

七、响应式工具
让一个盒子在小屏幕时隐藏

<div class="row"><div class="col-xs-3">1</div><div class="col-xs-3">2</div><div class="col-xs-3 hidden-sm">我会18变</div><div class="col-xs-3">4</div></div>