1、什么是响应式网页
响应式网页/自适应网页(适应各种设备):一个页面,可以在各种不同的设备下浏览,都有不错的浏览体验。
2、响应式网页的三个特征:
(1)流式网格布局(像水一样,随容器形状的变化产生变化)
(2)可伸缩的图片和字体
(3)CSS3 Media Query(媒介查询)
3、如何测试响应式网页
(1)使用真实物理设备——效果可靠但任务量太大
只要手机/平板/PC在同一个局域网/互联网即可测试。
(2)使用第三方测试/模拟软件——效果有待进一步的验证
(3)使用浏览器自带的模拟器测试:网页按F12左上角手机标志,可选设备,也可以输入宽高分辨率。
优势:可以模拟常见的设备、网速、经纬度、加速度....
不足:效果有待进一步的验证
4、使用webstorm
创建新项目:file->new project->empty project->选择路径(注意不要有中文和空格)
在新项目下建立js文件夹和css文件夹和img等常用的文件夹
在新项目下建立HTML文件
WS的常用操作:(使用的是eclipse的快捷键,需要设置settings的keymap改为eclipse)
常用快捷键(Keymap/Eclipse):
*复制当前行: Ctrl+Alt+↓
*向上/下移动当前行: Alt+↑/↓ (整个元素)
*删除当前行: Ctrl+D
*注释/取消当前行: Ctrl+/
*代码补全(ZenCoding) Tab
div.class#ss -> <div class="class" id="ss"></div>
div.box*3 -> <div class="box"></div><div class="box"></div><div class="box"></div>
ul>li>span -> <ul><li><span></span></li></ul>
*假文生成(用于生成测试文字,生成内容不同):
lorem+TAB (lorem法语中假文的意思)
*多行编辑(可以配合上边功能使用):
Alt+左键点击 开始多行同时编辑
ESC/点击旁处 退出多行编辑模式
*重新格式化当前文档(将乱的代码对齐): Ctrl+Alt+L
5、移动web中viewport(视口)
以前,HTML网页基本都是为PC设计的,所以宽度比较大。
iOS浏览器可以显示这些为PC而编写的网页——把PC网页缩小后放到手机屏幕上——文字/图片都会强制缩小,影响浏览体验。
iOS引入了viewport(视口)的概念:用于显示网页的内容的一个逻辑概念,其宽度/高度都可以任意指定,可以大到2000px都可以,网页不是仅仅显示在物理窗口,而是显示视口中——就可以实现大网页不经缩放,直接显示在手机中——只是需要用户左右滑动窗口即可。后来Android也引入了该概念。
<head>中加入
<meta name="viewport" content="width=600px">
效果:
6、如何编写响应式网页
(1)设置viewport元标签(只对手机有效)
<meta name="viewport" content= "width=device-width , initial-scale=1.0 , user-scalable=no">
使用视口 内容设置 宽度为设备宽度(不设高) 逗号 初始缩放比例为1.0 用户是否能缩放:不能
(2)避免使用绝对单位(px),用相对单位代替(%、auto、em等),当用媒体查询技术时,也可以使用绝对单位
所有元素的宽度尽量用相对单位代替: width:60% width:auto
设置字体大小也用相对单位代替:font-size:1.5em
(3)使用流式定位:float
(4)图片大小实现自适应:
img { max-width: 50%; } /*父容器大小的50%*/
width:会随着容器的改变而改变,即使图片本身呢像素只有100px,也会和容器一样大,可能失真。
max-width:会随着容器的改变而改变,且不会超过图片自身原始大小,防止失真。
(5)根据浏览器屏幕的特征,有选择性的执行某些CSS样式——CSS3媒体查询技术(Media Query)
7、CSS3提供的Media Query技术
作用:根据客户端浏览设备的特性,有选择性的执行部分CSS
Media(媒体):指浏览网页的设备,如screen(pc/pad/phone)、print、tv、projection、屏幕阅读器.....
Query:查询出当前浏览设备的特性,如类型、宽度、高度、分辨率、色彩位深、方向Orientation(Landscape/Portrait),根据这些特性,执行特定的CSS样式。
PC:一般认为 width>990px
pad:一般认为 989px>width>768px
phone: 一般认为 767px>width
8、CSS3MediaQuery有两种用法:
(1)根据媒体的特性,执行不同的外部CSS:
先创建三个对应屏幕大小的样式文件如pc.css, pad.css, phone.css, 之后根据不同情况进行引用
<link media="screen and (min-width: 990px)" rel="stylesheet" href="pc.css">
/*媒体查询语句:媒体为screen(pc/pad/phone)并且最小宽度为990px时引入pc.css样式*/
<link media="screen and (min-width:768px) and (max-width: 989px)" rel="stylesheet" href="pad.css">
<link media="screen and (max-width: 767px)" rel="stylesheet" href="phone.css">
不足:客户端会不管媒体特性,请求所有的CSS文件。
(2)根据媒体的特性,执行某段CSS中的部分内容:
css文件
@media screen and (min-width:768px) and (max-width:990px) { /*当屏幕尺寸为min-width:768px andmax-width:990px时执行下面语句*/
h1 { ... }
.box { ... }
}
@media screen and (min-width: 990px){ /*当屏幕尺寸为min-width: 990px时执行下面语句*/
...
}
@media screen and (max-width: 767px){ /*当屏幕尺寸为min-width: 990px时执行下面语句*/
...
}
#a1{background: #ddd;float: left;}
#a2{background:red;float: left;}
#a3{background: #444;float: left;}
*{padding: 0px;margin: 0px;}
@media screen and (min-width:990px) {
#a1{ width: 20%; }
#a2{ width:60% ; }
#a3{ width: 20%; }
}
@media screen and (min-width:768px) and (max-width:989px) {
#a1{width: 25%;}
#a2{width:75% ;}
#a3{display:none;}
}
@media screen and (max-width:767px){
#a1{width: 100%;}
#a2{width:100% ;}
#a3{width: 100%;}
}
9、Twitter Bootstrap(引导程序) 网站(www.bootcss.com)
Bootstrap是一个框架HTML/CSS/JS框架,适用于移动设备优先的响应式网页。 (主要为css框架,js部分很少用)
Bootstrap分为五部分:
- 起步(Startup)
- 全局CSS样式(Global CSS)
- 组件(Component)
- 插件(Plugin)
- 定制(Customize)
10、Bootstrap第一部分:起步
(1)下载Bootstrap 网站(www.bootcss.com)
(2)安装Bootstrap (把下载的css和js分别拷贝到根目录下就可以了)
(3)网页基本模板
<!DOCTYPE html>
<html lang="zh-cn"> <!-- lang->language语言的意思,zh-cn简体中文-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--edge 表示客户端装的浏览器最新版本 -->
<!--如果用户用的是IE浏览器,那么IE的兼容模式设置为最新-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]> <!--条件注释css hack 如果版本低于IE9,加载下面文件-->
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><!--加载jQuery-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script><!--加载bootstrap.js-->
</body></html>
解释:
lang属性的两个作用:(1)告诉浏览器翻译时如何确定当前网页的基础语言 (2)告诉读屏软件当前页面的基础发音
IE浏览器的兼容性问题:
X-UA-Compitable: Cross-UserAgent-Compatible,该元标签只有IE浏览器支持。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
设置IE的兼容模式为edge——最新版,尽可能向行业标准看齐。
html5shiv.js
由@afarkas @jdalton @jon_neal @rem编写的一个JS自调用脚本,用于让老IE支持H5新标签。
respond.js
由Scott编写的一个JS自调用脚本,用于让老IE浏览器支持CSS3MediaQuery技术,从而实现响应式网页的编写