是时候复习一下响应式设计了手机字体大小在哪调「是时候复习一下响应式设计了」

1、针对某些设备的某些特征可以由不同的样式，通过媒体查询对页面进行重构。响应式网站是一个设计理念，它是多项技术的综合体。

2、目的是一个网站能够兼容多个终端（电脑、手机、Pad等）设备，不需要为每个终端做不同的版本。采用响应式布局设计的网站能够根据显示屏幕的大小而变化，页面的排版布局可以自动进行调整，以适应不同尺寸的屏幕，从而为用户提供更方便的阅读和交互。响应式布局简单的说就是一套设计在pc端和移动端都可以使用，并都能给用户提供方便的服务。

1、bootstrap框架的方式

2、尽量去使用百分比来进行样式宽度的控制，少用甚至不要去使用固定宽高。

3、使用css属性里面的媒体查询来进行元素的控制。

4、使用弹性盒子来进行开发，实现响应式开发。

练习：利用百分比进行响应式设计

缺点：内容不可变，小屏幕多内容，大屏幕少内容。

1、meta标签

（1）viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
（2）参数设置∶
　　width – viewport的宽度
　　height – viewport的高度
　　initial-scale – 初始的缩放比例
　　minimum-scale – 允许用户缩放到的最小比例
　　maximum-scale – 允许用户缩放到的最大比例
　　user-scalable – 用户是否可以手动缩放
2、media query（媒介查询）

Mediatype:设备类型, all (所有设备)、screen(用于电脑屏幕，平板电脑，智能手机等。)、 speech（应用于屏幕阅读器等发声设备）、 print（用于打印机和打印预览）

media feature：媒体功能

练习：当页面宽度少于400px时，显示左图布局效果，当页面宽度大于600px时，显示右图布局效果。

源码如下：

1、手机的屏幕比较小，宽度通常在600像素以下；PC
（ personal computer，个人计算机）的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768）

2、响应式设计一般对600px下，1000px上针对各版本做@media细化。设置相应的min-width和max-width值。

3、主要断点有：
第一个断点群体就是针对于智能手机设置，他的宽度是小于480px（<480px）
第二个断点是高智能移动设备，比如说Ipads设备，他的宽度是小于768px（<768px)
第三个断点就是针对于大设备，比如说PC端，他的宽度是大于768px(>768px)

4、其它几种断点：
添加一个小于320px的断点，针对于小型的移动设备；
还可以添加适用于平板设备的断点，大于768px小于1024px(>768px 和
最后还可以为超宽的桌面设置一个断点，大于1024px

5、设置断点把握三个要点：
满足主要的断点；
有可能的话添加一些别的断点；
设置高于1024px的桌面断点

1、CSS3 规范引入了一个新的单位叫 rem，和 em 类相似，但相对于 HTML 元素来说， rem 更易于使用。
2、rem 是相对于 HTML 元素的。
3、使用rem单位，就按以下三个步骤来计算：
确定基数：一般10px（自己记住就行，不用写进代码里）

px换算rem 公式=想要的px值/基数
　　也就是说，当你设置 html {font-size:100%;}，你想给容器里的文字设置字号14px，换算成rem就是0.875rem。
4、设置字体：
重置 HTML 的字体大小：
html{font-size:100%}
定义响应式的字体大小:
　　@media screen and (max-width: 600px){
body{
font-size:0.75rem;}

1、使用width属性：如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能。

缺点：图片会比它的原始图片大

2、使用 max-width 属性：如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小

3、背景图片：背景图片可以响应调整大小或缩放。
（1）如果 background-size 属性设置为 “contain”, 背景图片将按比例自适应内容区域。图片保持其比例不变。

（2）如果 background-size 属性设置为 “100% 100%” ，背景图片将延展覆盖整个区域.

（3）如果 background-size 属性设置为 “cover”，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例，因此 背景图像的某些部分无法显示在背景定位区域中。

4、不同设备显示不同图片

大尺寸图片可以显示在大屏幕上，但在小屏幕上确不能很好显示。我们没有必要在小屏幕上去加载大图片，这样很影响加载速度。所以可以使用媒体查询，根据不同的设备显示不同的图片。

5、HTML5 元素

元素类似于 和 元素。可以设置不同的资源，可以设置多张图片，第一个设置的资源为首选使用的：

自学：掌握以下代码的功能及倍图的概念

源码如下：

完成以下导航栏效果：

源码如下：

响应式网页测试平台：
http://www.wswl.net/a/html/