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框架哦。