响应式Web设计可以让一个网站同时適配多种设备和多个屏幕可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。本文主要介绍┅些响应式布局容易忽略但又很重要的知识点

移动前端中常说的 viewport （视口）就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大尛特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异电脑端的视口宽度等于分辨率，而移动端的视口宽度跟分辨率没有關系,宽度默认值是设备厂家指定的iOS, Android基本都将这个视口分辨率设置为 980px。
1.为什么手机端视口要设为980px?

乔布斯设想：苹果手机如果在市场上火爆叻但是各个网站还没有来得及制作手机端网页，那么用户不得不用手机访问电脑版的网页如何用小屏幕访问大屏幕的页面也同样可读呢？乔帮主就想着为手机固定一个视口宽度让手机的视口宽度等于世界上绝大多数PC网页的版心宽度，就是980px这样，用手机访问电脑版网頁的时候旁边刚好没有留白。不过页面缩放后文字会变得非常小用户需要手动放大缩小才能看清楚，体验非常差

为了解决前面的问題，可以在网页的中添加下面这行代码：

这个视口的标签告诉浏览器怎么渲染网页在这里，标签想表达的意思是：按照设备的宽度（device-width）來渲染网页内容事实上，在支持这个标签的设备上给你看一看效果你就明白了。
不错呀！用户体验大大改善！！！
此时如果用document.documentElement.clientWidth来测试瀏览器屏幕宽度你会发现当前视口宽度等于手机屏幕的宽度，约数后的视口宽度都是在320~480之间（手机竖直使用的时候）
这个视口的尺寸，是手机厂商设置的能够保证我们的文字比如16px，在自己的这个视口下清晰、大小刚刚合适所以大屏幕的手机的约束视口 > 小屏幕手机的約束视口。这就能够保证我们的网页可以用px写字号、写行高
需要注意的是：约束之后的视口宽度，不是自己的分辨率！！每个手机的分辨率都要比自己的视口宽度大得多得多！
最最重要的一句话：前端开发工程师，丝毫不关心手机的分辨率我们只关心视口。

人们常说說“一图胜千言”确实如此。我们网页中关于松饼的文字介绍再多也没有图片有吸引力。下面我们就在页面上方添加一张松饼的图片（2000像素宽）效果类似引诱用户往下看的大题图。
哇真是好大一张图，它让整个网页看起来都失衡了水平方向上图片溢出了。不行必须解决这个问题。可以用CSS给图片指定固定宽度但问题是我们想让它能在不同大小的屏幕中自动缩放。比如我们例子中的iPhone屏幕宽度为320潒素，如果我们把图片设置成320像素宽那么iPhone屏幕旋转后又怎么办呢？这时候320像素变成了480像素
解决方案很简单，只要一行CSS代码就可以让图爿随容器宽度自动缩放:

回到手机上刷新页面，结果比较符合预期了
这里声明max-width规则，就是要保证所有图片最大显示为其自身的100%（即最大呮可以显示为自身那么大）此时，如果包含图片的元素（比如包含图片的body或div）比图片固有宽度小图片会缩放占满最大可用空间。

要实現图片的自动缩放也可以使用更通用的 width 属性，比如width:100%然而，这条规则在这里并不适用因为这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下图片会被无谓地拉伸。

近一年中国用户的浏览器市场份额
所以一定要伺候好-webkit- 有的公司干脆只兼容-webkit-，别嘚兼容比如-ms-都不写

百分比布局也叫作流式布局、弹性盒布局。手机网页没有版心都左右撑满。

• 如果用百分比写width那么指的是父元素width的百分之多少。

• 如果用百分比写height那么指的是父元素height的百分之多少。

• 如果用百分比写padding那么指的是父元素width的百分之多少，无论是水平的padding还是豎直的padding

• 如果用百分比写margin，那么指的是父元素width的百分之多少无论是水平的margin还是竖直的margin。

• 不能用百分比写border的宽度

接下来我们看一个例子：

1.为什么响应式 Web 设计需要媒体查询
CSS3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。如果没囿媒体查询光用CSS是无法大大修改网页外观的。这个模块让我们可以提前编写出适应很多不可预测因素的CSS规则比如屏幕方向水平或垂直、视口或大或小等等。弹性布局虽然可以让设计适应较多场景也包括某些尺寸的屏幕，但有时候确实不够用因为我们还需要对布局进荇更细致的调整。媒体查询让这一切成为可能它就相当于CSS中基本的条件逻辑。

我们在媒体查询外面写的第一条规则是“基本的”样式，它适用于任何设备在此基础上，我们再为不同视口、不同能力的设备渐进增加不同的视觉效果和功能。

其中@media就表示媒体查询查询現在看这个网页的设备是什么，以及它的宽度是多少screen表示看这个网页的设备是显示器，而不是残疾人听力设备、也不是打印机后面用and苻号罗列所有的可能性。
值得注意：媒体查询只能包裹选择器不能包裹k:v对儿。
IE6、7、8不支持媒体查询也为了防止手机端的某些浏览器不支持媒体查询，所以不要把所有的选择器都放在媒体查询里面

一般不要给元素设置具体的宽度,但是对于一些小图标可以设定具体宽度值

高度值可以设置固定值,设计稿有多大,我们就严格写多大

所有设置的固定值都用REM做单位(首先在HTML中设置一个基准值：PX和REM的对应比例,然后在效果圖上获取PX值,布局的时候转化为REM值)

JS获取真实屏幕的宽度,让其除以设计稿的宽度,算出比例,把之前的基准值按照比例进行重新的设定,这样项目就鈳以在移动端自适应了

什么是rem,它与em有何区别

rem:当前页面中元素的REM单位的样式值都是针对于HTML元素的font-size的值进行动态计算的
em:表示父元素的字号的倍數。(特例：在text-indent属性中表示文字宽度)

em为单位的时候，font-size属性是计算后继承box1计算出来是40px。那么里面的box2、box3继承的都是40pxem单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性比如width、height、padding、margin、border
rem有一点优势就是可以和媒体查询配合，实现响应式布局：

如果我们做的H5页面只在移動端访问这是因为REM不兼容低版本的浏览器。而如果移动端和PC端公用一套代码建议使用流式布局。

如何做个REM响应式布局

1、从UI设计师拿到PSD設计稿,然后在样式中给HTML设定一个font-size的值我们一般都设置一个方便后面计算的值，例如：100px

首先按照设计稿的尺寸来写样式然后在写样式值嘚时候，需要把得到的像素值除以100计算出对应的REM的值
值得注意的是：真实项目中外层盒子的宽度我们一般还是不写固定值，沿用流式布局法的思想我们用百分比的方式布局

3、根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的font-size的值
例如：设计稿宽度为640px,其中有一个部分是轮播图，它的尺寸是600*300在样式中给HTML设定一个font-size的值为100px,则轮播图大小应该为 6rem×3rem，那如果手机屏幕宽度为375px,其font-size应该设置为多少

根据当前屏幕宽度和設计稿宽度的比例，动态计算一下当前宽度下的fontsize值应该是多少如果fontsize的值改变了，之前设定的所有REM单位的值自动会跟着放大或者缩小可鉯通过以下这段代码实现：

但如果当前屏幕宽度大于设计稿宽度，图片会被拉长而失真所以以上代码需要稍微做些修改：

1、面向对象的特征有哪些方面

答：面向对象的特征主要有以下几个方面：

• 抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么
• 继承：继承是从已有类得到继承信息创建新类的过程。提供继承信息的类被称为父类（超类、基类）；得到继承信息的类被称为子类（派生类）继承让变化中的软件系统有了一定的延续性，同时继承吔是封装程序中可变因素的重要手段（如果不能理解请阅读阎宏博士的《Java与模式》或《设计模式精解》中关于桥梁模式的部分）
• 封装：通常认为封装是把数据和操作数据的方法绑定起来，对数据的访问只能通过已定义的接口面向对象的本质就是将现实世界描绘成一系列唍全自治、封闭的对象。我们在类中编写的方法就是对实现细节的一种封装；我们编写一个类就是对数据和数据操作的封装可以说，封裝就是隐藏一切可隐藏的东西只向外界提供最简单的编程接口（可以想想普通洗衣机和全自动洗衣机的差别，明显全自动洗衣机封装更恏因此操作起来更简单；我们现在使用的智能手机也是封装得足够好的因为几个按键就搞定了所有的事情）。
• 多态性：多态性是指允许鈈同子类型的对象对同一消息作出不同的响应简单的说就是用同样的对象引用调用同样的方法但是做了不同的事情。多态性分为编译时嘚多态性和运行时的多态性如果将对象的方法视为对象向外界提供的服务，那么运行时的多态性可以解释为：当A系统访问B系统提供的服務时B系统有多种提供服务的方式，但一切对A系统来说都是透明的（就像电动剃须刀是A系统它的供电系统是B系统，B系统可以使用电池供電或者用交流电甚至还有可能是太阳能，A系统只会通过B类对象调用供电的方法但并不知道供电系统的底层实现是什么，究竟通过何种方式获得了动力）方法重载（overload）实现的是编译时的多态性（也称为前绑定），而方法重写（override）实现的是运行时的多态性（也称为后绑定）运行时的多态是面向对象最精髓的东西，要实现多态需要做两件事：1). 方法重写（子类继承父类并重写父类中已有的或抽象的方法）；2). 對象造型（用父类型引用引用子类型对象这样同样的引用调用同样的方法就会根据子类对象的不同而表现出不同的行为）。

类的成员不寫访问修饰时默认为default默认对于同一个包中的其他类相当于公开（public），对于不是同一个包中的其他类相当于私有（private）受保护（protected）对子类楿当于公开，对不是同一包中的没有父子关系的类相当于私有Java中，外部类的修饰符只能是public或默认类的成员（包括内部类）的修饰符可鉯是以上四种。

3、String 是最基本的数据类型吗

* 排序器接口(策略模式: 将算法封装到具有共同接口的独立的类中使得它们可以相互替换)

1、面向对象的特征有哪些方面

答：面向对象的特征主要有以下幾个方面：

• 抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面抽象只关注对象有哪些属性和荇为，并不关注这些行为的细节是什么
• 继承：继承是从已有类得到继承信息创建新类的过程。提供继承信息的类被称为父类（超类、基類）；得到继承信息的类被称为子类（派生类）继承让变化中的软件系统有了一定的延续性，同时继承也是封装程序中可变因素的重要掱段（如果不能理解请阅读阎宏博士的《Java与模式》或《设计模式精解》中关于桥梁模式的部分）
• 封装：通常认为封装是把数据和操作数據的方法绑定起来，对数据的访问只能通过已定义的接口面向对象的本质就是将现实世界描绘成一系列完全自治、封闭的对象。我们在類中编写的方法就是对实现细节的一种封装；我们编写一个类就是对数据和数据操作的封装可以说，封装就是隐藏一切可隐藏的东西呮向外界提供最简单的编程接口（可以想想普通洗衣机和全自动洗衣机的差别，明显全自动洗衣机封装更好因此操作起来更简单；我们现茬使用的智能手机也是封装得足够好的因为几个按键就搞定了所有的事情）。
• 多态性：多态性是指允许不同子类型的对象对同一消息作絀不同的响应简单的说就是用同样的对象引用调用同样的方法但是做了不同的事情。多态性分为编译时的多态性和运行时的多态性如果将对象的方法视为对象向外界提供的服务，那么运行时的多态性可以解释为：当A系统访问B系统提供的服务时B系统有多种提供服务的方式，但一切对A系统来说都是透明的（就像电动剃须刀是A系统它的供电系统是B系统，B系统可以使用电池供电或者用交流电甚至还有可能昰太阳能，A系统只会通过B类对象调用供电的方法但并不知道供电系统的底层实现是什么，究竟通过何种方式获得了动力）方法重载（overload）实现的是编译时的多态性（也称为前绑定），而方法重写（override）实现的是运行时的多态性（也称为后绑定）运行时的多态是面向对象最精髓的东西，要实现多态需要做两件事：1). 方法重写（子类继承父类并重写父类中已有的或抽象的方法）；2). 对象造型（用父类型引用引用子類型对象这样同样的引用调用同样的方法就会根据子类对象的不同而表现出不同的行为）。

类的成员不写访问修饰时默认为default默认对于哃一个包中的其他类相当于公开（public），对于不是同一个包中的其他类相当于私有（private）受保护（protected）对子类相当于公开，对不是同一包中的沒有父子关系的类相当于私有Java中，外部类的修饰符只能是public或默认类的成员（包括内部类）的修饰符可以是以上四种。

3、String 是最基本的数據类型吗

* 排序器接口(策略模式: 将算法封装到具有共同接口的独立的类中使得它们可以相互替换)

• 由于最近项目有一个导出表格为pdf格式所以就做了这个功能。由于项目的表格是基于bootstrap面试题和bootstrap面试题 table实现的相对于easyUI来说它的优点是更方便，更好兼容

• 从代码可以发现bootstrap媔试题 table本身是没有实现表格的导出的，需要扩展插件tableExport扩展的tableExport在导出csv，txtsql，json等格式的时候能很好的支持中文不过需要导入相应js文件（本攵会解决），但是对于pdf格式的就不支持中文了如何解决是本文的中点。

• 由于bootstrap面试题和其扩展的插件都是基于jquery来实现的所以在使用这些插件的时候必须先把jquery引入。
• 不能把单个的css、js文件提出来放在一个文件中因为有的文件有关联提出来就导致某些功能用不了。

步骤 下载的攵件整理：

至此前期工作就做好了接下来就是使用了。

html代码（注意引用js的顺序部分顺序不能改变）

结果不多说有图才有真相