如何更简单地实现响应式网页设计（你不应错过这个教程） _响应式框架下载

文章图片
什么是网页响应式设计？设计一个网站，做到半途的时候发现一调整屏幕大小，那网页就不堪直视了（在浏览器中按F12快捷键，点击右上角手机图标查看）。这个就是屏幕适配的问题了，网页在不同设备上的展示效果是不一样的，但是我们想要网页在不同设备上都能友好地展示，解决屏幕适配的方式一般来说有两种：自适应和响应式。
响应式：Responsive Web Design，简称RWD，它主要是使用同一套网页模板适应所有设备。
自适应和响应式有什么区别和不同？自适应和响应式都是为了解决屏幕适配的问题
1：自适应。按照设备的不同设计网页，也就是说，不同的设备设计不同的模板（数数一个网站的网站可以有多少个模板。。。），服务器返回对应的模板数据，自适应的好处是实现起来比较可控，对于用户体验有更多选择空间，测试也更容易，不过工作量巨大，维护起来也困难。
2：响应式。同一个页面，所有设备只需要设计一套模板。但是设计测试的时候就头大了，响应式的好处是工作量不是很大，代码相对简洁，可以灵活适应各种分辨率的设备，拥有更快的加载速度。
这两种方式没有哪个更先进的之说，主要看你所在项目的需求以及成本。对于自适应，我发现国内大公司很多都使用这种方式，包括天猫和京东，一般来说我们选择响应式会更适宜项目开发。
自适应网页设计和响应式网页设计网站案例在浏览器网页中按F12快捷键或右键 – 审查元素/检查，调试窗口左上角切换设备：

文章图片
自适应：
京东http://m.jd.com/
简书http://www.jianshu.com/（需要刷新页面）
CSDN http://www.csdn.net/（需要刷新页面）
响应式：
Github http://github.com/
Dribble http://dribbble.com/
segmentfaulthttp://segmentfault.com/
如何实现响应式网页设计？响应式网页的实现规范和细节在响应式设计中，以下设计规则推荐在实现中都考虑进去，也可以根据这些规范对原有项目进行响应式改造和优化，这些都是响应式设计的主要技术点。
1、在网页代码< head> 标签中，加入viewport元标签：

< meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">1、width=device-width ：设置网页宽度=设备宽度2、initial-scale=1.0：网页的初始缩放比例，1.0为100%3、minimum-scale=1.0：设置网页最小缩放比例4、maximum-scale=1.0：设置网页最大缩放比例5、user-scalable=no：设置是否允许用户调整缩放比例兼容IE6/7/8使用css3-mediaqueries.js < !--[if lt IE 9]> < script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">< /script> < ![endif]-->

2、网页布局使用相对宽度
使用绝对宽度会导致网页的宽度固定了，当屏幕尺寸改变的时候，网页也就不能自动适应了。相对宽度如：width: 50%、width: auto。
也可以使用CSS中一个很好用的函数calc，该函数可以动态计算长度值，如width: calc(100% – 150px)。
相对布局是所有界面布局的出发点，包括移动应用布局和网页布局。
3、网页布局使用流动布局
流动布局会根据屏幕尺寸自动调整元素布局，使用float布局后周围的元素也会重新调整布局，可以通过clear清除浮动，clear: both。

.side{ width: 20%; float: left; } .main{ width: 80%; float: right; }

4、响应式网页设计的利器——媒体查询
CSS的媒体查询是非常有用的，媒体查询可以给不同屏幕尺寸的设备设计不同的样式，原生代码设计响应式网页中，媒体查询是响应式的核心。
媒体查询完整语法如下：

@media mediatype and|not|only (media feature) { //CSS样式代码 }1)mediatype：选择媒体类型。常见的值为all（所有设备），screen（电脑、平板、手机等）；2)media feature：指定媒体的特征值。后面还可以增加多个特征条件，常见的有max-width，min-width，max-device-width等；2)and|not|only：条件控制；整条语句的意思是：在mediatype类型的设备下，满足（media feature）的条件，则使用下面的CSS样式。

CSS@media媒体查询实例：

@media screen and (max-width: 500px){ .side{ width: 60px; } .main{ width: 100%; } }

5、可以针对不同的媒体使用不同的CSS样式脚本
语法如下：

< link rel="stylesheet" media="mediatype and|not|only (media feature)" href="http://www.srcmini.com/style01.css">

例子：

< link rel="stylesheet" media="screen and (max-width: 800px)" href="http://www.srcmini.com/style01.css">

这样可以让你的CSS响应式布局的代码更加简洁清晰。
6、响应式网页设计的细节——字体
1）使用相对默认值的字体大小，默认值为16px。你可以在html根元素中更改默认值，以后使用相对默认值来设置字体，可以使用百分比或rem：

html{ font-size: 20px; } .main{ font-size: 80%; (16/20 = 80%) font-size: 1.6rem; (32/20 = 1.6) }

2）使用相对于网页窗口的字体单位。视口单位为：vw，vh（viewport-width，viewport-height），1vw表示，视口宽度的1%，如果视口宽度为1000px，1vw即为10px。
7、图片显示自动缩放
设置图片width属性为100%，图片会根据容器自动扩展；设置max-width：100%，则图片大小不会大于原来的尺寸。
Html5的< picture> 元素可以为不同设备提供不同的图片资源：

< picture> < source srcset="logo_01.png" media="(max-width: 800px)"> < source srcset="logo_02.png"> < img src="http://www.srcmini.com/logo.png"> < /picture>

总的来说，应该在使用媒体查询的大前提下，分别使用不同的布局，设置不同的默认字体，加载不同的图片等，这样会更有利于管理和控制。
到此，响应式网页设计基本介绍完了吧？你可以自由地针对不同屏幕设计了？恐怕不是，CSS是个很累的活儿，原生代码写下去我的血不够用呀。。。是的！用框架吧！使用响应式网页设计框架可以延长你的生命。。。
流行的响应式网页设计UI框架有哪些？1、Bootstrap

文章图片
Bootstrap是全球最受欢迎的前端组件框架，集合各种HTML+CSS+JS组件，移动设备优先，响应式开发必备，目前最新版本是Bootstrap4。它的使用比较灵活，开箱即用，严重的问题就是使用Bootstrap4开发的网站界面，看上去都差不多，想要界面与众不同的可以先看看其它前端框架。
2、Foundation

文章图片
Foundation使用于任何设备媒体，可以轻松设计漂亮的响应式网站、应用程序和电子邮件，Foundation是语义化的、移动优先、并且可定制。
3、Semantic-UI

文章图片
Semantic的类也是语义化的，就是有点泛滥，使用JavaScript比较方便，也是响应式设计框架，而且它的组件可以选择不同的主题样式，包括Google Material和Bootstrap样式等
个人比较喜欢这semantic，它的控件都比较简洁，想要与众不同的界面可以考虑用semantic。
4、Material-UI

文章图片
基于Google原生设计开发的React开源响应式组件，你需要有React的使用基础。
5、Pure

文章图片
Pure的体积比较小，仅仅提供CSS模块，支持响应式开发，想要快速开发的话就用Pure吧！
6、html5-boilerplate

文章图片
HTML5前端模板，让你的项目开发起来更节省时间。
好了，框架就先介绍这么几个，你也可以百度一下，然后去github查看，你可以通过该项目的star数和fork数、以及它的上次更新日期来判断该项目是否好。
好了，介绍完响应式UI框架是不是就可以洗洗睡了？还不行？做一个专业的码农多不容易！现在开发项目的水都很深，如果你的方向不明确、经验不足、太执着某一点了，会浪费你很多不必要的时间和精力。
实际上，你可以根据需要使用你需要的响应式网页模板，使用HTML响应式模板可以让你更加快地开发项目。
响应式HTML5网页模板有哪些？1、gentelella

文章图片
没错！这就是HTML后台管理模板！使用Bootstrap3设计，包含大量的JQ插件和工具，组件有图表、日历、表单验证、向导样式界面、画板外导航菜单、文本表单、日期范围、上传区域、表单自动完成、范围滑块、进度条、通知等。
想想以前开发后台多苦逼。。。
2、responsive-html-email-template

文章图片
这是一个HTML响应式邮件模板，项目开发也会用到发送邮件，如发通知邮件或广告邮件等，如果你想要有更漂亮的邮件展示样式，不妨用这个。
3、startbootstrap

文章图片
最后就介绍这个模板了，这个模板可是上天了，上天了，上天了！重要的事情说三篇，对于深受前端设计毒害的我，我可是特别喜欢它。
Start bootstrap基于bootstrap，提供多种HTML网页主题和模板，涵盖了前台和后台，包括单页面模板、商业网站样式、博客类模板，商城响应式模板，高大上的后台管理模板等。
结语：
【如何更简单地实现响应式网页设计（你不应错过这个教程）】前端页面设计需要掌握基本的响应式设计，模板不是万能的，仍需要掌握基本的技术操作，才能看懂别人的代码，或修改或添加。主要的还是需要掌握至少一个前端UI框架，对于项目开发你才能胸有成竹，操纵自如。