响应式布局笔记-CSDN博客

固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；
可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；实现成本最低，但拓展性比较差；
弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；
混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。

总结：对于通栏，大于等于2栏的等分排版建议采用弹性布局；大于等于2栏的非等分排版建议采用混合布局；

布局响应，对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）；

无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点），我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式：

布局不变，对模块内的内容进行1.挤压－拉伸；2. 换行－平铺；3. 删减－增加；

布局改变，主要有：1.模块位置变换；2.模块展示方式改变：隐藏－展开；3.模块数量改变：删减－增加；

（要注意最大宽度时从大到小，最小宽度时从小到大,否则样式优先级问题）

@media 设备名 only|and|not (media feature){CSS-Code}

字符间以空格相连，选取条件包含在小括号内，多种设备用逗号分隔，这一点继承了css基本语法。

超小屏幕<768px；小屏幕>=768px；中等屏幕>=992px；大屏幕设备>=1200px

例子

/*屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。*/

@media only screen and (min-device-width:480px) and (max-device-width:1024px) and ( orientation:portrait ){ .box{margin:0 auto;} }

@import url("css/?.css" )设备名 only|and|not (media feature){CSS-Code}

例子

@import url('style/a.css') screen and (min-width:960px) and (max-width:1199px){ };

注意：（最好在样式表中使用，在style标签中使用IE6.7不兼容）

例子：

使用@media 查询，你可以针对不同的媒体类型定义不同的样式。

媒体特性	取值	min/max	描述
width	<length>	yes	定义输出设备中的页面可见区域宽度
height	<length>	yes	定义输出设备中的页面可见区域高度
device-width	<length>	yes	定义输出设备的屏幕可见宽度
device-height	<length>	yes	定义输出设备的屏幕可见高度
orientation	portrait 竖屏 landscape横屏	no	定义'height'是否大于或等于'width'。值portrait代表是---竖屏，landscape代表否---横屏
aspect-ratio	<ratio>	yes	定义'width'与'height'的比率
device-aspect-ratio	<ratio>	yes	定义'device-width'与'device-height'的比率。如常见的显示器比率：4/3, 16/9, 16/10
color	<integer>	yes	定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0
color-index	<integer>	yes	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
monochrome	<integer>	yes	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
resolution	<resolution>	yes	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	progressive \| interlace	no	定义电视类设备的扫描工序 progressive：连续扫描；interlace：交织扫描
grid	<integer>	no	用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否