服务购

　　web前端响应式开发是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式，也是兼容浏览器分辨率，清晰度，横屏，竖屏的页面元素布局方式。

　　web前端响应式开发分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

　　响应式设计需要注意的问题：

　　1.宽度不固定，可以使用百分比

　　#head{width:100%;}

　　#content{width:50%;}

　　2.图片处理

　　处理图片自适应的问题

　　在html页面中的图片，比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的最大宽度，如：

　　#wrap img{

　　max-width:100%;

　　height:auto;

　　}

　　如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。

　　除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：

　　#log a{display:block;

　　width:100%;

　　height:40px;

　　text-indent:55rem;

　　background-img:url(logo.png);

　　background-repeat:no-repeat;

　　background-size:100% 100%;

　　}

　　background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值，那么另一个值默认为auto。

　　background-size:cover; 等比扩展图片来填满元素

　　background-size:contain; 等比缩小图片来适应元素的尺寸

　　最后，总结下响应式布局的实现原理：

　　首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）

　　1.响应式布局

　　2.Meta标签定义

　　3.使用Media Queries适配对应样式

　　4.响应式内容

　　5.响应式图片

　　好了，上面就是小编为大家介绍的web前端响应式开发所有内容，如果您还想了解其他内容，请登录猪八戒网服务购，更多精彩不容错过。