个性化阅读
专注于IT技术分析

如何更简单地实现响应式网页设计?你不应错过这个教程

响应式示例

什么是网页响应式设计?

设计一个网站,做到半途的时候发现一调整屏幕大小,那网页就不堪直视了(在浏览器中按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/

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框架

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

2、Foundation

Foundation开源框架

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

3、Semantic-UI

semantic-ui开源框架

Semantic的类也是语义化的,就是有点泛滥,使用JavaScript比较方便,也是响应式设计框架,而且它的组件可以选择不同的主题样式,包括Google Material和Bootstrap样式等

个人比较喜欢这semantic,它的控件都比较简洁,想要与众不同的界面可以考虑用semantic。

4、Material-UI

Material-UI开源框架

基于Google原生设计开发的React开源响应式组件,你需要有React的使用基础。

5、Pure

Pure UI框架

Pure的体积比较小,仅仅提供CSS模块,支持响应式开发,想要快速开发的话就用Pure吧!

6、html5-boilerplate

html5-boilerplate开源框架

HTML5前端模板,让你的项目开发起来更节省时间。

好了,框架就先介绍这么几个,你也可以百度一下,然后去github查看,你可以通过该项目的star数和fork数、以及它的上次更新日期来判断该项目是否好。

好了,介绍完响应式UI框架是不是就可以洗洗睡了?还不行?做一个专业的码农多不容易!现在开发项目的水都很深,如果你的方向不明确、经验不足、太执着某一点了,会浪费你很多不必要的时间和精力。

实际上,你可以根据需要使用你需要的响应式网页模板,使用HTML响应式模板可以让你更加快地开发项目。

响应式HTML5网页模板有哪些?

1、gentelella

gentelella模板

没错!这就是HTML后台管理模板!使用Bootstrap3设计,包含大量的JQ插件和工具,组件有图表、日历、表单验证、向导样式界面、画板外导航菜单、文本表单、日期范围、上传区域、表单自动完成、范围滑块、进度条、通知等。

想想以前开发后台多苦逼。。。

2、responsive-html-email-template

responsive-html-email-template邮件模板

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

3、startbootstrap

startbootstrap模板实例

最后就介绍这个模板了,这个模板可是上天了,上天了,上天了!重要的事情说三篇,对于深受前端设计毒害的我,我可是特别喜欢它。

Start bootstrap基于bootstrap,提供多种HTML网页主题和模板,涵盖了前台和后台,包括单页面模板、商业网站样式、博客类模板,商城响应式模板,高大上的后台管理模板等。

结语:

前端页面设计需要掌握基本的响应式设计,模板不是万能的,仍需要掌握基本的技术操作,才能看懂别人的代码,或修改或添加。主要的还是需要掌握至少一个前端UI框架,对于项目开发你才能胸有成竹,操纵自如。

赞(0) 打赏
未经允许不得转载:srcmini » 如何更简单地实现响应式网页设计?你不应错过这个教程
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏