HTML——响应式布局

1、html响应式布局一、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

2、feature媒体特性（要用小括号包含）：width、max-width、min-width2.rem和media媒体查询相结合，不同的设备设置不同的html文字大小3.引入资源：针对不同的屏幕尺寸调用不同的css文件（最好的办法是从小到大） link rel=stylesheet href=".css" media=mediatype and|not|only （media feature）>三、栅格系统1.把页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。2.行必需放到container容器里实现列的划分需要给列加类前缀列大于12，多余

3、的列将会作为整体另起一行xs-超小；sm-小；md-中等；lg-大=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.列嵌套：栅格系统内置的栅格系统将内容再次嵌套，一个列内再分成若干个小列。（

4、列嵌套最好加个行row，这样可以取消父元素的padding，且高度自动和父级一样高）4.列偏移：col-md-offset-（偏移的份数是12-两个盒子的份数）；假如惟独一个盒子且想要居中，则偏移（12-盒子的份数）/25.列排序：col-md-push-：推。col-md-pull-：拉。6.响应式工具：利用媒体查询，针对不同设备举行展示或躲藏内容 躲藏：hidden-xs/sm/md/lg 显示：visible-xs/sm/md/lg当网页页面在正常状况下如下图所示在一行上罗列当网页页面缩小到767px甚至以下时，整体布局方式发生转变，如下图所示。首先先用ul和li设置几个导航栏盒子，宽度

5、为750px，每个li宽度为93.75px，左浮动，在正常页面时正常罗列。当页面缩小时，我们需要利用媒体查询额外设置样式，囫囵ul宽度为页面的100%，每个li宽度为33.33%。声明与引入样式整体css样式一、假如孩子的份数相加等于12，则会占满囫囵.container的宽度，假如没设置相应页面的份数，则孩子会挺直占满一行。二、假如孩子的份数相加小于12，则会占不满囫囵.container的宽度，会有空白。三、假如孩子的份数相加大于12，则多的那一列会另起一行。四、列嵌套：一个孩子里嵌套孩子嵌套最好添加row，不但可以消退父盒子的padding影响，还能让子盒子继承父盒子的高度。下图为没添加row时的效果。五、列偏移假如惟独一个盒子且想要居中，则偏移（12