响应式网页-01

16-1025am day01

1.响应式网页 —— 重点

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

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

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

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

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

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

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

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

<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

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

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

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

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

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

(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指的是当大于..时
午间练习：使用媒体查询的第二种用法，实现下面的响应式网页

最后编辑于：2019.01.31 17:23:43

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。