响应式网页-01

16-1025am day01

1.响应式网页 —— 重点

2G——不能上网
2.5G——GRPS——只能浏览WML网页
3G——智能操作系统——浏览HTML网页

1.什么是响应式网页？

Responsive Web Page，一个网页，可以根据浏览设备的不同，而自动更改布局、图片、文字效果，不会影响用户的浏览体验。

响应式网页的构成：
(1)布局：不能固定宽度，必须是流式
(2)文字和图片大小随着容器大小而改变
(3)CSS3 Media Query

2.如何测试响应式网页？

(1)使用真实的物理设备来测试
优势：测试效果真实可靠
不足：测试任务量太大

(2)使用设备模拟软件来测试
优势：快速，不需要准备大量的物理设备
不足：测试结果有待进一步验证

(3)使用Chrome自带的设备模拟器
优势：简单直观，功能比较丰富
不足：测试结果有待进一步验证

viewport：iOS诞生时网页都是为PC编写，只能进行强制缩放后才能在手机中显示——后果是所有的图片、文字都小到无法看清。苹果公司提出了Viewport（视口）的概念——可以在远比物理屏幕更宽的范围内浏览网页，不经缩放。后果是用户不得不左右滑动屏幕。后来的Android也借鉴了视口的概念。

3.如何编写响应式网页？——重点

手写响应式网页必须注意的六点：

(1)必须声明viewport元标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

width=device-width:视口当前采用的宽度等于设备宽度
initial-scale=1.0 缩放比例的1.0
user-scalable 的作用是用户不能缩放 默认是yes

<meta>标签一定要放在head之后（紧接着）
避免用户左右滑动屏幕，禁止浏览器初始时缩放显示

(2)容器的宽度尽量不使用固定值(px)，使用相对宽度(%或auto)

(3)文字尽量不使用绝对尺寸(px)，使用相对尺寸(em或rem)

在pc中字体默认是14px，2em代表28px;

(4)图片要指定大小，如下方式：

img {
    /*width: 400px; */ //不用它
    /*width: 100%;   可随容器无限缩放*/  //不用它 
    max-width: 100%;   可随容器缩小，但最大不会超过图片的原始大小——防止马赛克
}

(5)页面布局时不能固定，而要用流式布局，如浮动、inline-block

(6)灵活的使用CSS3 Media Query技术——响应式网页必备元素！

4.使用CSS3 Media Query技术——重中之重

Media：指浏览网页的设备，如screen、tv(电视)、projection(投影仪)、tty(字符终端)、print(打印机 )、braille(盲文手机)、speech(语音设备)等

Query：指自动获取当前浏览设备物理特性，如色彩深度、orientation(方向)、width、height等

CSS3媒体查询技术：可以自动根据浏览设备的类型及特性，执行不同的CSS代码。

CSS3MediaQuery有两种具体用法：

(1)根据媒体查询的结果，执行不同的外部CSS文件

<link media="screen and (max-width:991px) and (min-width:768px)" rel="stylesheet" href="css/pad.css"/>

不足：即使当前设备不执行的CSS文件，也会被浏览器加载；每个CSS文件中可能存在很多重复代码

(2)在一个CSS片段中，有选择的执行某些选择器

@media screen and (min-width: 768px) and (max-width:991px) {
    选择器 {  名: 值；  }
}

当屏幕宽度大于768px 小于991px时执行这些选择器 记忆方法(往相反方向记忆)：min指的是当大于..时
午间练习：使用媒体查询的第二种用法，实现下面的响应式网页