什么是网页响应式设计?
设计一个网站,做到半途的时候发现一调整屏幕大小,那网页就不堪直视了(在浏览器中按F12快捷键,点击右上角手机图标查看)。这个就是屏幕适配的问题了,网页在不同设备上的展示效果是不一样的,但是我们想要网页在不同设备上都能友好地展示,解决屏幕适配的方式一般来说有两种:自适应和响应式。
响应式:Responsive Web Design,简称RWD,它主要是使用同一套网页模板适应所有设备。
自适应和响应式有什么区别和不同?
自适应和响应式都是为了解决屏幕适配的问题
1:自适应。按照设备的不同设计网页,也就是说,不同的设备设计不同的模板(数数一个网站的网站可以有多少个模板。。。),服务器返回对应的模板数据,自适应的好处是实现起来比较可控,对于用户体验有更多选择空间,测试也更容易,不过工作量巨大,维护起来也困难。
2:响应式。同一个页面,所有设备只需要设计一套模板。但是设计测试的时候就头大了,响应式的好处是工作量不是很大,代码相对简洁,可以灵活适应各种分辨率的设备,拥有更快的加载速度。
这两种方式没有哪个更先进的之说,主要看你所在项目的需求以及成本。对于自适应,我发现国内大公司很多都使用这种方式,包括天猫和京东,一般来说我们选择响应式会更适宜项目开发。
自适应网页设计和响应式网页设计网站案例
在浏览器网页中按F12快捷键或右键 – 审查元素/检查,调试窗口左上角切换设备:
自适应:
简书http://www.jianshu.com/(需要刷新页面)
CSDN http://www.csdn.net/(需要刷新页面)
响应式:
Github http://github.com/
Dribble http://dribbble.com/
segmentfault http://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="style01.css">
例子:
<link rel="stylesheet" media="screen and (max-width: 800px)" href="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="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框架,对于项目开发你才能胸有成竹,操纵自如。