响应式布局毕业论文

1.  响应式布局： 需要媒体的接入方式来实现： 媒体的接入方式：@media （媒体类型） and （媒体特性）{设置样式}； 媒体类型： 一般用的较多的是screen 电脑屏幕 和 all 所有设备 ； 媒体特性：一般设置最大宽度和最小宽度； max-width：600px：最大的宽度是600px，也就是在小于等于600px的时候，都生效； min-width：600px：  最小的宽度是600px，也就是在大于等于600px的时候，都生效； 会有一种区间的情况： ps：有一种特定某种媒体类型，前面可以加个only； 或者也可以用外部样式link去引入： 2. 给网页盒子设置最大宽度和最小宽度的作用（高度同理）： max-width：可以设置最大的宽度，超出限制，则只展示最大宽度；决定了一个盒子的上限； min-width：可以设置最小的宽度，缩小超出最小的宽度，则按照设置的最小的宽度显示，出现滚动条，决定了一个盒子的下限； 如果同时设置了宽度和最大宽度或者最小宽度，max-width / min-wdith > width ;有优先权； 3. 给整个页面设置高度 ： 因为不设置宽度时，可以自适应屏幕宽度，但是高度不行； 快捷方法：用vh（可视窗口的高度） vw（可视窗口的宽度）； 但是有局限性：用100vh 只会撑满可视窗口 ，页面往下滑动的时候，就没有了； 比如： ★4.怎么让盒子水平垂直都居中：     margin：0 auto；的时候，只能实现水平居中；实现不了垂直居中； ★一种有固定宽高的时候： （1）那么我们可以先变成绝对定位，靠绝对定位来达到垂直和水平都居中； （2）有固定宽高的，实现水平垂直居中的第二种方法：（是用ie低版本浏览器的时候可以用的方式）： ★一种没有固定宽高的时候： 由内容撑起的高宽的时候，我们可以用平移来达到垂直和水平都居中； 用弹性盒子来实现水平垂直居中： 首先 父盒子必须要有高度 ，因为没有高度，无法自适应，就无效； 用这种方式来达到都居中， 要在父盒子里设置属性，就不是在子盒子里设置属性了 ： 用table方式实现垂直居中： （要给表格里的td设置宽高，设置垂直居中即可） 用div转变为table一样可以实现：