传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

一、响应式网页设计

1、为什么需要响应式设计
•随着3G、4G网络的普及,越来越多的人使用手机上网。
•移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?

2、早期的解决方案
•手机的屏幕比较小,宽度通常在768像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。
•很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个Wap版本。这样做固然保证了效果,但是比较麻烦,同时要维护多个版本,而且如果一个网站有多个入口,会大大增加架构设计的复杂度。

3、解决方案
•于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?
图片9.png
4、响应式设计
•2010年,Ethan Marcotte(伊森·马克特)提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。
•他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。

PC版效果图:
图片10.png
平板端与手机端效果图:
图片11.png
图片12.png
图片13.png
二、响应式设计详解
1、viewport标签
•<meta name="viewport" content="width=device-width, initial-scale=1" />
•上面这行代码的意思是,面积的100%。网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕

2、媒体查询
•"自适应网页设计"的核心,就是CSS3引入的Media Query
•自动探测屏幕宽度,然后加载相应的CSS文件。
•<link rel="stylesheet" type="text/css" media="screen and (max-width: 767px)" href="phone.css" />
•上面的代码意思是,如果屏幕宽度小于767像素(max-width:767px),就加载phone.css文件。
•<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px)" href=“style.css" />
•如果屏幕宽度宽度大于768px,则加载style.css文件。

3、不使用绝对宽度
•由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。
•具体说,CSS代码不能指定像素宽度:
•如:width:xxx px;
•只能指定百分比宽度:
•如:width: xxx %;

4、相对大小的字体
•字体也不能使用绝对大小(px),而应使用相对大小(rem)。
•rem字体大小是相对于根元素<html>字体大小 ,默认网页根元素大小为100%,即16像素,所以1rem = 16px;(0.75rem = 12px,0.875rem = 14px)
•在实际项目中,可以使用如下方式设置:
     html {font-size:62.5%} 即 1rem = 10px

5、图片自适应
•除了布局和文本,“自适应网页设计”还必须实现图片的自动缩放。
     img { max-width: 100%;}
   
•为了保证所有多媒体标签实现自适应也可以设置
     object ,embed { max-width: 100%;}
.....................


以上为部分资料,全部笔记已整理为PDF版本,大家可回帖下载
第二天笔记.pdf (2.79 MB, 下载次数: 158, 售价: 3 黑马币)

评分

参与人数 2黑马币 +6 收起 理由
啊b + 5
williamasas + 1 神马都是浮云

查看全部评分

分享至 : QQ空间
收藏

45 个回复

倒序浏览
回帖。。。。。。
回复 使用道具 举报

回帖。。。。。。
回复 使用道具 举报
占楼,签到+1.....
回复 使用道具 举报
在学习了
回复 使用道具 举报
好的,很好的学习视频!
回复 使用道具 举报
感谢分享!!!!!
回复 使用道具 举报
哎``没见过!!!!!!
回复 使用道具 举报
感谢分享哦
回复 使用道具 举报
不错 学习了
回复 使用道具 举报
我爱php
回复 使用道具 举报
回帖。。。。。。
回复 使用道具 举报
666感谢分享哦
回复 使用道具 举报

回帖啦。。。。。。
回复 使用道具 举报
感谢分享
回复 使用道具 举报

感谢分享哦
回复 使用道具 举报
正在学习中
回复 使用道具 举报
+1.。。。。。。。。。。。。。。
回复 使用道具 举报
fighting
回复 使用道具 举报
非常棒,期待第三份笔记!
回复 使用道具 举报
123下一页
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /5 下一条