搜索
响应式布局1什么是响应式布局？响应式布局是一种web页面的布局方式而已。响应式布局他是一种能够实现页面的布局跟随浏览器或者设备等因素变化而导致布局改变的一种布局方式。2.响应式布局的特征a)能够跟随设备发生变化b)能够跟随相似设备的不同属性变化3.媒体查询a)媒体查询是CSS3支持的一种新的语法，在CSS2中已经对媒体查询有了部分支持。b)媒体类型：i.在CSS2中已经存在了媒体类型。ii.CSS3中支持那些媒体类型MediaTypes媒体类型CSSVersion版本Compatibility兼容性Description简介allCSS2所有浏览器用于所有媒体设备类型auralCSS2Opera用于语音和音乐合成器brailleCSS2Opera用于触觉反馈设备handheldCSS2Chrome,Safari,Opera用于小型或手持设备MediaTypes媒体类型CSSVersion版本Compatibility兼容性Description简介printCSS2所有浏览器用于打印机projectionCSS2Opera用于投影图像，如幻灯片screenCSS2所有浏览器用于计算机显示器ttyCSS2Opera用于使用固定间距字符格的设备。如电传打字机和终端tvCSS2Opera用于电视类设备embossedCSS2Opera用于凸点字符（盲文）印刷设备媒体类型的使用方式：link语法@import语法@media语法1.link语法linkhref=”CSS文件”type=”text/css”rel=”stylesheet”media=”媒体类型”2@import语法@importurl(CSS文件)媒体类型;3.@media语法@media媒体类型4.媒体特性MediaFeatures媒体特性Value取值Acceptsmin/max接受min/maxDescription简介widthlengthyes定义输出设备中的页面可见区域宽度heightlengthyes定义输出设备中的页面可见区域高度device-widthlengthyes定义输出设备的屏幕可见宽度device-heightlengthyes定义输出设备的屏幕可见高度orientationportrait|landscapeno定义'height'是否大于或等于'width'。值portrait代表是，landscape代表否aspect-ratioratioyes定义'width'与'height'的比率device-aspect-ratioratioyes定义'device-width'与'device-height'的比率。如常见的显示器比率：4/3,16/9,16/10colorintegeryes定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0color-indexintegeryes定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0monochromeintegeryes定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0resolutionresolutionyes定义设备的分辨率。如：96dpi,300dpi,118dpcmscanprogressive|interlaceno定义电视类设备的扫描工序gridintegerno用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否紫色链接表示该属性在CSS3有修改或者增加了新的属性值；橙色链接表示该属性是CSS3新增属性width浏览器视窗的宽度height浏览器视窗的高度Device-width设备系统设定的分辨率宽度(可以修改的)Device-height设备系统设定的分辨率高度(可以修改的)物理分辨率:屏幕能够显示的最大分辨率。(区分以上2个)orientation设定屏幕是横屏还是竖屏aspect-ratio定义浏览器的宽度和高度比例。device-aspect-ratio定义设备的宽高比（常用）三种媒体查询+媒体特性的书写格式link语法linkhref=”CSS文件”type=”text/css”rel=”stylesheet”media=”媒体类型and(媒体特性)...”@import语法@importurl(CSS文件)媒体类型and(媒体特性)...;@media语法@media媒体类型and(媒体特性)and(媒体特性){重置的CSS样式}媒体查询关键字：not关键字可以在所有的媒体类型中使用，表示排除掉某种媒体类型。only关键字对于能够识别媒体类型同时支持媒体查询的设备only关键字就当他没有就可以了。对于支持媒体类型但是又不支持媒体特性的浏览器，他会先读取only而不是screen这样的媒体类型，会导致浏览器不会加载该样式。对于媒体类型和媒体特性都不支持的浏览器而言，那就别看了。视窗设置视窗设置的语句很简单就是一个meta标签，而且仅对手持设备有效。主要为手机、pad等设备的视窗设定有效。格式：metaname=“viewport”content=”设备的属性设定”属性描述width可视区域的宽度，单位是像素。其取值可以是一个实际的数字或关键词device-widthheight可视区域的高度，单位是像素。其取值可以是一个实际的数字或关键词device-heightinitial-scale某个页面首次被显示时可视区域的缩放级别。取值为1.0将使页面以其实际尺寸显示，无任何缩放minimun-scale可视区域的最小缩放级别。它表示用户可以将页面缩小的程度。取值为1.0将禁止用户缩小至实际尺寸以下maximun-scale可视区域的最大缩放级别。它表示用户可以将页面放大的程度。取值为1.0将禁止用户放大至实际尺寸以上user-scalable指定用户是否可以对页面进行缩放。设置为yes将允许缩放，no则禁止缩放可视区域meta标签由Apple发明且尚未成为标准。然而，除iPhone之外的很多手机浏览器都支持该标签。响应式布局的特点及注意事项：1.页面布局要使用流体网格。意思就是在布局中尽量使用百分比少使用像素，布局结构就允许写像素。2.弹性图片设置图片尽量不设定专有尺寸，而是根据流体网格进行适应缩放，简单的说，图片宽度设置为：”img{max-width:100%}3.媒体查询的使用为不同的设备实现不同的风格。4.了解各种设备的屏幕分辨率。为了适应不同的设备及特性要了解。5.了解主要断点。多种设备的分辨率的分割点，在使用媒体查询时要注意断开查询不要连接在一起，例如400px和401px其他的CSS技巧：1.尽量少用无关紧要的div2.尽量不要用内联元素来布局。3.少用JS和flash，因为手机的JS事件和手机不同4.尽量少用绝对定位和浮动样式。5.尽量抛弃冗余结构，不使用100%布局。