1. HTML页面是如何适应不同分辨率的显示器
HTML页面何适应不同分辨率的显示器可以通过：响应式布局、自适应网页设计等方法：
1、响应式布局设计：
响应式布局可以为不同链告蚂终端的用户提供更加舒适的界面和更好的用户体验，响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。
2、自适应网页设计：
自适应网页设计（AdaptiveWebDesign）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。
(1)前端不同屏幕测试扩展阅读：
响应式布局与棚埋自适应布局的区别：
1、自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
2、自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。
3、自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一友源套页面全部适应。
4、自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。
2. 前端面试题系列之-CSS及页面布局篇
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。
采用flex布局的元素，成为flex容器。它的所有子元素自动成为容器成员，称为flex项目。常用的，设置到容器上的属性有：
设置到项目上的属性：
(Block Formatting Context)块级格式化上下文。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此.并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
上述方法都可以创建BFC，但是会带来一些负面影响：
::before是css3的写法，:before是css2的写法，用来设置对象前的内容
:before的兼容性要比::before好
更准确的说法
1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；
常规方法
不需要使用transform属性时
webkit内核
参考链接：
CSS实现不换行/自动换行/文本超出隐藏显示省略号
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能
@import规则一定要先于除了@charset的其他任何CSS规则。
不推荐使用@import:
因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。
伪元素和伪类的区别总结
css继承指的是被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。
相关链接：
CSS 继承，哪些属性能继承，哪些不能
z-index可以改变元素层叠顺序，z-index较大的会叠加在z-index较小的元素上方。z-index值相同时，则按照文档流顺序，后面的覆盖前边的。
px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。注意css中的1px并不一定是物理像素的一个像素块，需要根据DPR计算，对应多少物理像素块
设备像素比：dpr = 物理像素 / 逻辑像素(px)，例如，iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375
参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。
css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
1英寸（inch）=2.54厘米（cm）
手机对角线的长度换算成英寸
屏幕横向和纵向的像素点
1px即代表一个物理像素点/像素块
PPI，是每英寸可以显示的像素点的英文缩写。如果说上面分辨率是一个质量总量的概念，那么，ppi就是密度的概念。我们可以通过屏幕的像素总量除以屏幕大小来计算屏幕的PPI，公式如下： a：横向像素数量，b：纵向像素数量，c：屏幕尺寸（英寸）
1px与多少厘米之间是不能直接划等号的，需要看分辨率。
一般电脑的像素分辨率是72ppi，计算公式： (((1**2 + 1**2)**0.5)/72)*2.54 ，此时1px=0.0498cm，1cm=25px；
很多手机是300ppi，计算公式： (((1**2 + 1**2)**0.5)/300)*2.54 ，此时1px=0.0119cm。
参考链接：
画一条0.5px的线
在继承性上：
一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。
一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。
渐进增强，开发时间长，成本高，优雅降级，节约成本，开发周期短。
3. 如何进行前端自动化测试
一般前端自动化测试大致包括
类库单元测试自动化
UI组件测试自动化
类库单元测试自动化
较好实现
基本思路是让不同的浏览器可以自动根据指令跑一些JS函数
结果与预期比对后返回是否通过case测试标志
其中一般有两种实现方式：
其一：
1.打开目标浏览器，运行测试框架站点
2.测试框架站点通过ajax 轮询、websocket 等方式，将待测 js 的 case 在浏览器内运行（通过eval 、createElement("script") 等方式）
3.比对测试结果，将结果 post 到远端
4.远端接受测试结果
5.远端等待所有浏览器返回结果完成
6.marge 所有浏览器数据显示最终通过与否结果。
这种方式弊端：
人工开启一次所有浏览器
需要排队测试，浏览器只能一次运行完一组测试后才能再运行下一组
如果中间某testcase导致浏览器异常，返回结果将缺失，需要人工去服务器上检查下浏览器状态
好处：
可以覆盖所有想覆盖到的浏览器
另一种方式：
1.将常用浏览器内核放进一个或多个相互有关联的进程内
2.用例通过系统消息发送到各个包装的内核中
3.每次开启一个新内核进程运行JS用例
4.用例结果发送给包装进程
5.包装进程汇集所有用例结果后post到远端保存
6.包装进程连带内核进程一起退出
优点：
无序人工开启一次浏览器
独立进程运行，无需排队
不怕内核异常，异常后包装进程可以直接恢复内核或者通知测试失败
缺点：
前端实现太困难，需要C++开发
无法覆盖到所有浏览器
4. 如何在无显示器的Ubuntu下跑前端测试
Selenium是一个web自动化测试框架。用它可以实现web应用自动化测试。不过，我不只是用它来做测试，我还用它从电子商务网站签到页面爬取javascript生成的或AJAX的内容。
作为程序员，我不满足于使用Selenium IDE来记录和重放宏记录。那样很蹩脚，而且不适合部署到多台服务器。这时，你需要Selenium WebDriver，它又灵活，而且通过Selenium headless，运行Selenium在服务器上不需要显示设备。
为什么要运行Headless Selenium 测试？
当你希望能在服务器上运行的健壮的自动化操作，而其操作又依赖于 27X7，同时还希望它是稳定的，这时，Selenium是你唯一的选择。但是，Selenium需要运行在浏览器上。所以，你得骗Selenium，让它觉得，它正跑在一台带有显示器的机器上。这样，你就可以不间断的跑自动化测试，同时又不失稳定性和扩展性。
如何在ubuntu上运行Selenium headless
本教程的目标是在使用Mozilla Firefox作为主浏览器的ubuntu上配置和运行selenium headless。
安装Firefox headless
确认你的ubuntu安装的是最新版本的Firefox。我遇到过Selenium的版本和Firefox的版本不兼容问题。如果你没有安装Firefox或者使用的是老版本的Firefox，可按以下步骤升级Firefox：
在/etc/apt/sources.list加入：
ppa:mozillateam/firefox-stable
运行以下命令升级或安装Firefox
sudo apt-get update
sudo apt-get install firefox
运行成功后，ubuntu上就应该安装好最新版本的Firefox了。
安装Xvfb——一个X虚拟框架
这个仿真框架使用虚拟内存能让X-Server运行在没有显示设备的机器上。这样，浏览器就可以运行了。在ubuntu和Debian上安装xvfb，只要谨银迟运行：
sudo apt-get install xvfb
现在，可以运行xvfb服务上一个带有数字的显示设备上，这样是为了防止你在下阶段添加设备时引发冲突。本教程，我搏信们分配一个显示设备 10..
sudo Xvfb :10 -ac
-ac代表关闭xvfb的访问控制。好了，服务器可以运行了。
启动浏览器
在你运行浏览器前，你首先要设置DISPLAY环境变量，以指定xvfb运行在哪个显示设备上。在加入环境变量前，我们检查一下所有的这些都如我们所料：
export DISPLAY=:10
firefox
如果终端(terminal)没有显示错误，就说明你已经成功运行Firefox在无显示设备的ubuntu上了。它会一直运行，直到你使用ctrl + C或其它类似方法来终止其运行。同时，它不会有任何输出。
如果你能成功运行以上的步骤，那么接下来的部分就是轻而易举了。现在，我们可以在ubuntu服务器上运行selenium，如同你在本地运行一样。本教程的下一部分，我展示了如何运行一个独立selenium服务器，同时使用PHP的selenium webdriver去连接。
小结
很久以前，我也使用selenium做自动化的集成测试，使用HtmlUnit的webdriver，所以不需要显示器。但是HtmlUnit的表现总是有些不如意。而最近在项目中发现这篇文章，解决我长久以来的问题：在没有显示器的服务器上运行祥李Firefox的集成测试。
5. 前端做出来的移动端页面用什么测试
移动端的web页面调试一般可以采取以下三种调试方法：第一，在PC端的浏览器里直接f12调试，一般现在的浏览器都有device mode，调用这个模式浏览器就可以模拟移动端的设备进行调试，目前chrome支持的设备包括苹果、三星、nexus等；
第二，在PC端创建安卓和ios的虚拟机调试，感觉有点复杂，一般web开发很少用这种模式，原生app开发用得比较多；
第三，直接用移动设备测试，将你开发所用的PC和要测试的移动设备连接在同一个局域网下，通过PC搭建一个服务器，这样移动设备就可以通过局域网ip访问你开发的网页看效果了。
通常来说，第一种调试方式方便快捷，能够快速的查看效果，基本上解决90%的调试问题。剩下的问题一般要配合第三种方法，比如不同的系统（安卓、苹果）搭配不同的浏览器（UC、QQ、chrome、Safari）的显示差异问题等等。
6. 前端开发新手求教，兼容性测试问题
这位网友你好，你可以下载chrome浏览器开发板，其带有手机端的测试工具，按F12就出来了。可以选择不同的手机型号进行测试。
7. 移动前端开发，怎么让页面适应不同的屏幕
头部写上下面代码：
<meta name="viewport" content="width=device-width, initial-scale=1"/>
然后网页宽度一般都用百分比，不要固定死。
再用@media媒体查询
不同大小屏幕要做不同的css样式
附件是一个@media的小例子
缩放浏览器窗口可以查看样式的变化
8. 前端测试有哪几种类型
目前在软件系统开发中，测试是一个非常重要的环节，特别是前端测试，有几种类型的测试被认为是前端测试所必需的，让我们简单了解一下。
01
单元测试
在修复bug或添加一点功能时，软件的其他部分可能会停止工作。为了处理这种情况，单元测试将代码的各个部分分开，以单独检查其准确性。跳过或最小化单元测试可能会导致修复缺陷的成本增加。Javascript单元测试包括一个套件中有组织的测试数量，这些测试彼此不冲突，并且相互之间的依赖性更少。
02
端到端测试
端到端测试涵盖了应用程序从头到尾的流程，结束测试跟踪用户的旅程，如打开浏览器、导航，并体验完整的生产场景。端到端测试验证互连系统和软件系统，它包括一个完整的前端和后端系统。
03
集成测试
集成测试的目的是使模块/组件按预期运行。集成测试技术应用于许多模块紧密耦合的大型应用中，模块被单独测试，一旦集成，组合行为被验证，它是与开发并行进行的。在集成测试中，您需要更多的逻辑技能，因为在测试期间，某些模块可能尚未准备就绪或正在构建中。
集成时使用测试存根和驱动程序，集成测试将分析开发人员实现的逻辑是否遵循规定的标准。当模块与第三方API交互时，查看响应非常重要。当开发人员跳过单元测试时，集成测试就不可避免了。
04
功能测试
功能测试，用于验证应用程序或网站对目标用户能正确工作。使用适当的平台、浏览器和测试脚本，以保证目标用户的体验将足够好。功能测试是为了确保程序以期望的方式运行而按功能要求对软件进行的测试，通过对一个系统的所有的特性和功能都进行测试确保符合需求和规范。
05
可视化/用户界面测试
视觉/UI测试包括屏幕截图的验证。这是一项质量保证活动，旨在确保屏幕在任何设备、屏幕分辨率、浏览器和操作系统上的外观与预期一致。通过无头浏览器中捕获的不同屏幕截图比较渲染版本的结果，可视化回归测试允许您检测偏差。
在构建应用程序时，事情会变得过载和复杂，这种情况很容易破坏现有的功能并引入新的bug—单元、行为和集成测试将到位，以使应用程序稳定。
06
性能/压力测试
性能测试是一种非功能性技术，它在各种工作负载下检查软件的稳定性、响应性、速度、可靠性和资源使用等系统参数。
压力测试：应用程序被重载以检查意外行为并了解其承受能力。
为网站执行一个高质量的前端测试将提高生产力，并增加客户对您的服务的依赖。了解趋势通用模式并结合专家经验来定义质量测试套装是很重要的。
07
跨浏览器测试
Web端应用测试主要障碍之一就是在不同的浏览器上“测试他们的网站/应用程序”，也称为“跨浏览器测试”或者“兼容性测试”。浏览器和浏览器版本很多（Google Chrome，Mozilla Firefox，Internet Explorer，Microsoft Edge，Opera，Yandex等），可以通过多种设备（通过台式机，笔记本，智能手机，平板电脑等）访问网站/应用。）以及可能用于访问网站的多种操作系统（Windows，MacOS，Linux，Android，iOS等）。
要确保网站的UI/UX及其功能正常运行，并且在“浏览器+浏览器版本+操作系统+设备配置”的组合上没有任何BUG，则将需要大量的开发，测试和维护工作。
9. 前端技术，屏幕适配技术怎么做
屏幕适配有两种方法：
1.把页面做成100%自动，页面随屏幕的大小而变化，屏幕多大页面多大。
2.通过媒体查询来判断屏幕的大小，根据不同大小的屏幕加载不同样式。
10. 前端一套页面如何适配不同分辨率大小的屏幕
这个一般都是使用响应式布局然后做哦，所以可以考虑用bootstrap框架哦。