面试之响应式布局（转载）

时间 2019-12-17

原文原文链接

参考：维基百科， CSS3 @media 查询， Bootstrap中文官网，鄙视IE， 2014年5个最流行前端框架对比，自适应网页设计-阮一峰，响应式网页设计，响应式布局-百度百科，响应式网站设计原则，响应式布局这件小事，响应式 Web 设计新原则，什么是响应式布局设计？，自适应与响应式的区别， Foundation中文网

响应式布局是什么意思？

响应式布局能够根据不一样的浏览设备（PC端，平板，智能手机等）呈现不一样的网页布局，同时减小缩放、平移和滚动。

适应移动端的大趋势，提升用户体验，减小开发成本。

为何要使用响应式布局？

主要是使网页适用于用于移动端设备，屏幕分辨率是出现的最大的兼容性问题。

能够为不一样的设备提供不一样的网站，也就是同一网站作普通PC端和移动端两种页面。不管是前期的开发仍是后期的维护改版，都很是的麻烦。

响应式布局的缺点？

兼容代码多，工做量大

设计原则？适合什么样的项目？

向下兼容，移动优先。

对于很是复杂的网页布局，不适合进行网页自适应的布局，缘由之一是实现成本过高，其次就是复杂页面（例如容商网首页，中国企业集群首页等）也不适合移动端的浏览。

其余的响应式布局的框架？

Prue框架是Yahoo的一款轻量级的框架，兼容IE7以上，性能好，可是中文文档少，不利于团队开发，没有组件。

Foundation by ZURB，次于Bootstrap，重量级，362K大小

Bootstrap优点 ？

学习成本低

是目前最流行的自适应框架

性能很是好，最基础的文件大小只有149.1k

bootstrap.min.js 35.1k

bootstrap.min.css 114k

中文文档完善，还有全套的视频教程

有许多组件能够选择，如 Bootstrap switch，Sco.js，Flat UI等，便于快速开发

兼容性

Chrome Firefox Internet Explorer Opera Safari

Android 支持支持 N/A 不支持 N/A

iOS 支持 N/A 不支持支持

Mac OS X 支持支持支持支持

Windows 支持支持支持支持不支持

	Chrome	Firefox	Internet Explorer	Opera	Safari
Android	支持	支持	N/A	不支持	N/A
iOS	支持	N/A	不支持	支持
Mac OS X	支持	支持	支持	支持
Windows	支持	支持	支持	支持	不支持

windows平台，支持IE8，若是不用框架则须要IE9以上支持,并且经过插件Bsie（鄙视IE）能够兼容IE6。

响应式布局实例css

响应式页面实例地址html

http://xys.laiwanapp.com/bootstrap-1/

http://xys.laiwanapp.com/bootstrap-2/

http://xys.laiwanapp.com/bootstrap-3/

兼容性问题（分辨率分解-*~768手机,768~992平板,992~1200普通PC,1200~*大屏幕PC）

	chrome18	firefox11（firefox3.6）	IE7（较少用户）	IE8（主流）	IE9（表明最新版本）	IE6
实例1-微博	无	无（无圆角）	无	无	无	崩溃
实例2-相册	圆角错误	无圆角（无圆角，不支持背景尺寸属性）	无	无	无	崩溃
实例3-博客	圆角错误	无圆角，进度条无动画（无圆角，进度条无动画）	无	无	无	崩溃
其它

说明

chrome18和firefox都是旧版本的，用户很是少

不支持背景属性能够用position和z-index属性解决

IE6崩溃可使用针对Bootstrap的插件Bsie解决大部分，但若是不要求对IE6支持，不建议使用，影响性能

下图分别是无圆角，正常圆角，圆角错误，圆角是CSS3属性，因此会出现兼容问题，但IE7以上都支持，已经很好了（w3school说IE9以上才支持，说明使用了css hack）

且官方文档里说明说明了这一点：http://v3.bootcss.com/css/#images-shapes

总结：支持主流浏览器，旧版本的浏览器出现的兼容性问题不大。

其它须要改进

移动端测试

兼容性问题（分辨率分解-

1. *~768手机，1栏

2. 768~992平板 ，2栏

3. 992~1200普通PC ，2栏

4. 1200~*大屏幕PC ，3栏

）

分辨率dpi	ppi	型号	竖	横
2560x1536（手机）	546	MX4 pro	1栏	1栏
720x1280（手机）		华为荣耀3c	1栏	1栏
1200x1920（手机平板）		华为 x1 7.0	1栏	2栏
800x1280（平板）		toshiba wt8a(win 8.1系统)	2栏	3栏
1366x768		Acer win8.1	-	-

原理

2.怎样实现响应式布局

如今响应式布局用得比较大众的应该是Bootstrap，可是我并不打算使用。缘由很简单，我对Bootstrap不熟悉不了解。而后我简单的看了下Bootstrap是怎么实现的响应式布局。原理很简单，就是使用到了CSS3中的media。media何方神圣？能够用来吃吗？它能够针对不一样的媒体类型定义不一样的样式，也能够针对不一样的屏幕尺寸设置不一样的样式。且当你重置浏览器大小的过程当中，页面也会根据浏览器的宽度和高度从新渲染页面。既然如此，响应式何愁。前端

3.media的简单使用

Max Width：在可视区域的宽度小于 600px 的时候被应用。css3

@media screen and (max-width: 600px) {
  .class {
    background: #0094ff;
  }
}

Min Width：在可视区域的宽度大于600px 的时候被应用。web

@media screen and (min-width: 600px) {
  .class {
    background: red;
  }
}

简单？对，就是如此简单。您还能够在600到900直接的启用。chrome

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #0094ff;
  }
}

固然，您还能够，放入单独文件。爽歪歪了吧。bootstrap

<link rel="stylesheet" media="screen and (max-width: 600px)" href="max600.css" />

好了，你已经知道得太多了。实现一个首页的响应式基本上已经够用了。segmentfault

默认样式显示移动端：windows

.blog_body_e.col-xs-12 .a_blog_user {
    display: inline-block;
}

.blog_body_e, .blog_body_b {
    padding-left: 10px;
    padding-right: 10px;
}

若是是PC端：（默认大于992px就算是PC端固然，你也能够自定义）浏览器

@media (min-width: 992px) {
    .blog_body_e.col-md-3 .a_blog_user {
        display: block;
    }

    .blog_body .blog_body_b {
        width: 80%;
        float: left;
    }

    .blog_body .blog_body_e {
        width: 20%;
        float: left;
        box-sizing: border-box;
        padding-right: 25px;
    }

    .blog_body_e, .blog_body_b {
        padding-left: 20px;
        padding-right: 20px;
    }
}

咱们看分布看看效果图