、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

（1） 聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器的解析器，用什么文檔類型 規范來解析這個文檔。

（2）嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。

（3）在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

（4）DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

2、行內元素有哪些？塊級元素有哪些？

（1）CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值， 比如div默認display屬性值為“block”，成為“塊級”元素； span默認display屬性值為“inline”，是“行內”元素。

（2）行內元素有：a b span img input select strong（強調的語氣） 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

3、link 和@import 的區別是？

（1）link屬于XHTML標簽，而@import是CSS提供的;

（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

（3）import只在IE5以上才能識別，而link是XHTML標簽，無兼容問題;

（4）link方式的樣式的權重 高于@import的權重.

4、瀏覽器的內核分別是什么?

IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原為Presto，現為Blink；

5、HTML5有哪些新特性？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

繪畫 canvas 用于媒介回放的 video 和 audio 元素 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失； sessionStorage 的數據在瀏覽器關閉后自動刪除 語意化更好的內容元素，比如 article、footer、header、nav、section 表單控件，calendar、date、time、email、url、search 新的技術webworker, websockt, Geolocation

6、對語義化如何理解？

用正確的標簽做正確的事情！

HTML語義化就是讓頁面的內容結構化，便于對瀏覽器、搜索引擎解析；在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于 SEO。使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。

7、HTML5的離線儲存有幾種方式？

localStorage長期存儲數據，瀏覽器關閉后數據不丟失；sessionStorage 數據在瀏覽器關閉后自動刪除。

8、iframe有那些缺點？

iframe會阻塞主頁面的Onload事件；

iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。

9、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會，sessionStorage和localStorage的存儲空間更大；sessionStorage和localStorage有更多豐富易用的接口；sessionStorage和localStorage各自獨立的存儲空間；

10、CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增偽類有那些？

1.id選擇器（ # myid） 　　　　2.類選擇器（.myclassname）

3.標簽選擇器（div, h1, p） 　 　4.相鄰選擇器（h1 + p）

5.子選擇器（ul < li） 　　　 　6.后代選擇器（li a）

7.通配符選擇器（ * ） 　　　　8.屬性選擇器（a[rel = "external"]）

可繼承的樣式： font-size font-family color, UL LI DL DD DT;

不可繼承的樣式：border padding margin width height ;

優先級就近原則，同權重情況下樣式定義最近者為準;

載入樣式以最后載入的定位為準;

優先級為:

!important > id > class > tag important 比 內聯優先級高

11、CSS3新增偽類舉例：

p:first-of-type 選擇屬于其父元素的首個元素的每個元素。

p:last-of-type 選擇屬于其父元素的最后元素的每個元素。

p:only-of-type 選擇屬于其父元素唯一的元素的每個元素。

p:only-child 選擇屬于其父元素的唯一子元素的每個元素。

p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個元素。

:enabled :disabled 控制表單控件的禁用態。

:checked單選框或復選框被選中。

12、如何居中div？如何居中一個浮動元素？

給div設置一個寬度，然后添加margin:0 auto屬性

div{ width:200px; margin:0 auto; }
居中一個浮動元素

確定容器的寬高 寬500 高 300 底層 設置層的外邊距 .div { Width:500px ; height:300px;//高度可以不設 Margin: -150px 0 0 -250px; position:relative;相對定位 background-color:pink;//方便看效果 left:50%; top:50%;}

列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？

　　1.block 象塊類型元素一樣顯示。 none 缺省值。象行內元素類型一樣顯示。 inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。 list-item 象塊類型元素一樣顯示，并添加樣式列表標記。

　　2. absolute　生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。

　　fixed （老IE不支持） 生成絕對定位的元素，相對于瀏覽器窗口進行定位。

　　relative 　生成相對定位的元素，相對于其正常位置進行定位。

　　static 默認值。沒有定位，元素出現在正常的流中 *（忽略 top, bottom, left, right z-index 聲明）。

　　inherit 規定從父元素繼承 position 屬性的值。

13、為什么要初始化CSS樣式？

　　因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）淘寶的樣式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }

14、css定義的權重

以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：/*權重為1*/div{}/*權重為10*/.class1{}/*權重為100*/#id1{}/*權重為100+1=101*/#id1 div{}/*權重為10+1=11*/.class1 div{}/*權重為10+10+1=21*/.class1 .class2 div{} 如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現

15、CSS3有哪些新特性？

CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px）， 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜 增加了更多的CSS選擇器 多背景 rgba

16、介紹一下CSS的盒子模型？

（1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

17.對WEB標準以及W3C的理解與認識？

標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性;

18.XHTML和HTML有什么區別？

HTML是一種基本的WEB網頁設計語言，XHTML是一個基于XML的置標語言最主要的不同：

XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關閉。標簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

19.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?

用于聲明文檔使用那種規范(HTML/XHTML)一般為 嚴格 過度 基于框架的html文檔

加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug

20.行內元素有哪些?塊級元素有哪些?CSS的盒模型?

塊級元素：div p h1 h2 h3 h4 form ul

行內元素: a b br i span input select

Css盒模型:內容，border ,margin，padding

21.CSS引入的方式有哪些? link和@import的區別是?

內聯 內嵌 外鏈 導入

區別 ：同時加載前者無兼容性，后者CSS2.1以下瀏覽器不支持

Link 支持使用javascript改變樣式，后者不可

22.CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?

標簽選擇符 類選擇符 id選擇符

繼承不如指定 Id>class>標簽選擇

后者優先級高

23.前端頁面有哪三層構成，分別是什么?作用是什么?

結構層 HTML 表示層 CSS 行為層 js

24.CSS的基本語句構成是?

選擇器{屬性1:值1;屬性2:值2;……}

25.你做的頁面在哪些瀏覽器測試過?這些瀏覽器的內核分別是什么?

Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

26.寫出幾種IE6 BUG的解決方法

1. 雙邊距BUG float引起的 使用display
2. 3像素問題 使用float引起的 使用dislpay:inline -3px
3. 超鏈接hover 點擊后失效 使用正確的書寫順序 link visited hover active
4. Ie z-index問題 給父級添加position:relative
5. Png 透明 使用js代碼 改
6. Min-height 最小高度 !Important 解決’
7. select 在ie6下遮蓋 使用iframe嵌套
8. 為什么沒有辦法定義1px左右的寬度容器(IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)
9. ie 6 不支持!important

27.img標簽上title與alt屬性的區別是什么?

Alt 當圖片不顯示是 用文字代表。

Title 為該屬性提供信息

28.描述css reset的作用和用途。

Reset重置瀏覽器的css默認屬性 瀏覽器的品種不同，樣式不同，然后重置，讓他們統一

29.解釋css sprites，如何使用。

Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量

30.瀏覽器標準模式和怪異模式之間的區別是什么?

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可顯示為什么模式

31.你如何對網站的文件和資源進行優化?期待的解決方案包括：

文件合并

文件最小化/文件壓縮

使用CDN托管

緩存的使用

32.什么是語義化的HTML?

直觀的認識標簽 對于搜索引擎的抓取有好處

33.清除浮動的幾種方式，各自的優缺點

1.使用空標簽清除浮動 clear:both(理論上能清除任何標簽，增加無意義的標簽)
2.使用overflow:auto(空標簽元素清除浮動而不得不增加無意代碼的弊端,,使用zoom:1用于兼容IE)
3.使用afert偽元素清除浮動(用于非IE瀏覽器)

34.javascript的typeof返回哪些數據類型

Object number function boolean underfind
35.例舉3種強制類型轉換和2種隱式類型轉換?

強制（parseInt,parseFloat,number）

隱式（== – ===）
36.split() join() 的區別

前者是切割成數組的形式，后者是將數組轉換成字符串
37.數組方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部刪除

Unshift()頭部添加 shift()頭部刪除

39.IE和DOM事件流的區別

1.執行順序不一樣、

2.參數不一樣

3.事件加不加on

4.this指向問題

40.IE和標準下有哪些兼容性的寫法

Var target = ev.srcElement||ev.target
41.ajax請求的時候get 和post方式的區別

一個在url后面 一個放在虛擬載體里面

有大小限制

安全問題

應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的
42.call和apply的區別

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
43.ajax請求時，如何解釋json數據

使用eval parse 鑒于安全性考慮 使用parse更靠譜
44.閉包是什么，有什么特性，對頁面有什么影響

閉包就是能夠讀取其他函數內部變量的函數。
46.添加 刪除 替換 插入到某個節點的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
47.解釋jsonp的原理，以及為什么不是真正的ajax

動態創建script標簽，回調函數

Ajax是頁面無刷新請求數據操作

48.javascript的本地對象，內置對象和宿主對象

本地對象為array obj regexp等可以new實例化

內置對象為gload Math 等不可以實例化的

宿主為瀏覽器自帶的document,window 等
50.”==”和“===”的不同

前者會自動轉換類型

后者不會
51.javascript的同源策略

一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機名、協議和端口號的組合

54.CSS定位方式有哪些?position屬性的值有哪些?他們之間的區別是什么?
在CSS中關于定位的內容是：position:relative | absolute | static | fixed
static 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。

relative 不脫離文檔流，參考自身靜態位置通過 top,bottom,left,right 定位，并且可以通過z-index進行層次分級。

absolute 脫離文檔流，通過 top,bottom,left,right 定位。選其最近的父級定位元素，當父級 position 為 static 時，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。

fixed 固定定位，這里他所固定的對象是可視窗口而并非是body或是父級元素。可通過z-index進行層次分級。
55.函數的幾種定義方法？

function a(){},
var a = function(){}
56.對象的定義方法？

a = new Object(), a = {}
57.類的定義方法（prototype）（繼承）

Var a = function(){}
a.prototype = {}
new a();
58.this 關鍵字的指向

obj.foo() == obj //方法調用模式,this指向obj
foo() == window; //函數調用模式,this指向window
new obj.foo() == obj //構造器調用模式, this指向新建立對象

foo.call(obj) == obj;//APPLY調用模式,this指向obj
59.異步ajax的優缺點都有什么？

優點：

相對于同步ajax：不會造成UI卡死，用戶體驗好。

相對于刷新頁面，省流量

缺點：

后退按鈕無效；

多個請求同時觸發時，由于回調時間不確定，會造成混亂，避免這種混亂需要復雜的判斷機制。

搜索引擎不友好

數據安全
60、介紹js的基本數據類型。

number,string,boolean,object,undefined　　

61、Javascript如何實現繼承？

通過原型和構造器

62、如何創建一個對象? （畫出此對象的內存圖）

function Person(name, age) { this.name = name; this.age = age; this.sing = function() { alert(this.name) } }

63、談談This對象的理解。

this是js的一個關鍵字，隨著函數使用場合不同，this的值會發生變化。但是有一個總原則，那就是this指的是調用函數的那個對象。this一般情況下：是全局對象Global。 作為方法調用，那么this就是指這個對象

64、事件是什么？IE與火狐的事件機制有什么區別？ 如何阻止冒泡？

（1） 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。

（2） 事件處理機制：IE是事件冒泡、火狐是 事件捕獲；

（3） ev.stopPropagation();

65、如何判斷一個對象是否屬于某個類？

使用instanceof （待完善） if(a instanceof Person){ alert('yes'); }

66、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

hasOwnProperty

67、對JSON 的了解？

　　JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基于JavaScript的一個子集。數據格式簡單, 易于讀寫, 占用帶寬小{'age':'12', 'name':'back'}

68、簡述一下src與href的區別

href 是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。

69、簡述同步和異步的區別

同步是阻塞模式，異步是非阻塞模式。

同步就是指一個進程在執行某個請求的時候，若該請求需要一段時間才能返回信息，那么這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；

異步是指進程不需要一直等下去，而是繼續執行下面的操作，不管其他進程的狀態。當有消息返回時系統會通知進程進行處理，這樣可以提高執行的效率。

70、px和em的區別

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em的值不是固定的，并且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

71、什么叫優雅降級和漸進增強？

漸進增強 progressive enhancement：

針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：

一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

區別：

a. 優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給

b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要

c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

72、瀏覽器的內核分別是什么?

IE: trident內核

Firefox：gecko內核

Safari：webkit內核

Opera：以前是presto內核，Opera現已改用Google Chrome的Blink內核

Chrome：Blink(基于webkit，Google與Opera Software共同開發)

73、如何消除一個數組里面重復的元素？

var arr1 =[1,2,2,2,3,3,3,4,5,6],
arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
if(arr2.indexOf(arr1[i]) < 0){
arr2.push(arr1[i]);
}
}
document.write(arr2); // 1,2,3,4,5,6

74、在Javascript中什么是偽數組？如何將偽數組轉化為標準數組？

偽數組（類數組）：無法直接調用數組方法或期望length屬性有什么特殊的行為，但仍可以對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬于偽數組。可以使用Array.prototype.slice.call(fakeArray)將數組轉化為真正的Array對象。

function log(){

var args = Array.prototype.slice.call(arguments);

//為了使用unshift數組方法，將argument轉化為真正的數組

args.unshift('(app)');

console.log.apply(console, args);

};

75、Javascript中callee和caller的作用？

caller是返回一個對函數的引用，該函數調用了當前函數；

callee是返回正在被執行的function函數，也就是所指定的function對象的正文。

76、請描述一下cookies，sessionStorage和localStorage的區別

sessionStorage用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

web storage和cookie的區別

Web Storage的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。

除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。

77、手寫數組快速排序

關于快排算法的詳細說明，可以參考阮一峰老師的文章快速排序

“快速排序”的思想很簡單，整個排序過程只需要三步：

（1）在數據集之中，選擇一個元素作為”基準”（pivot）。

（2）所有小于”基準”的元素，都移到”基準”的左邊；所有大于”基準”的元素，都移到”基準”的右邊。

（3）對”基準”左邊和右邊的兩個子集，不斷重復第一步和第二步，直到所有子集只剩下一個元素為止。

78、統計字符串”aaaabbbccccddfgh”中字母個數或統計最多字母數。

var str = "aaaabbbccccddfgh";

var obj = {};

for(var i=0;istr.length;i++){

var v = str.charAt(i);

if(obj[v] & obj[v].value == v){

obj[v].count = ++ obj[v].count;

}else{

obj[v] = {};

obj[v].count = 1;

obj[v].value = v;

}

}

for(key in obj){

document.write(obj[key].value +'='+obj[key].count+' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1

}

79、一次完整的HTTP事務是怎樣的一個過程？

基本流程：

a. 域名解析

b. 發起TCP的3次握手

c. 建立TCP連接后發起http請求

d. 服務器端響應http請求，瀏覽器得到html代碼

e. 瀏覽器解析html代碼，并請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現給用戶

80、對前端工程師這個職位你是怎么樣理解的？

a. 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

b. 參與項目，快速高質量完成實現效果圖，精確到1px；

c. 與團隊成員，UI設計，產品經理的溝通；

d. 做好的頁面結構，頁面重構和用戶體驗；

e. 處理hack，兼容、寫出優美的代碼格式；

f. 針對服務器的優化、擁抱最新前端技術。

osh Collinsworth的博客文章“永遠不要用px作為字體大小”中，作者討論了為什么不應該使用像素（px）作為網頁字體大小的單位[1]。作者指出，相對于容器、瀏覽器或用戶的字體大小，px值是靜態的。無論用戶的字體偏好設置如何，當您以靜態像素設置值時，它將覆蓋用戶的選擇，以您指定的確切值替代。這意味著，如果您的樣式表使用像素單位，可能導致訪問您網站的用戶難以閱讀。

因此，作者建議使用相對單位，如em、rem或百分比，而不是像素。這些單位是基于用戶的字體大小偏好設置進行縮放的，從而提供了更好的可訪問性和可讀性。尤其是在設計響應式網站時，相對單位能夠提高跨設備的兼容性。通過使用相對單位，設計師可以確保網站在不同設備和瀏覽器中以合適的字體大小顯示[1]。

下面是正文：

在 Web 開發領域中，有很多誤解流傳，即使它們被反駁了很多次也仍然存在。"外部鏈接應該總是在新標簽頁中打開" 就是一個很好的例子。CSS Tricks 在將近十年前就對此進行了詳細的解釋（簡而言之：大多數情況下是錯誤的），但它似乎仍然在某些角落中存在。

案例證明：在CSS中， px ， em 或 rem 單位之間沒有功能上的區別的想法是一個我一遍又一遍聽到的誤解，因此我想在這里發帖來解決這個問題。

我們要非常清楚：在CSS中使用的單位絕對很重要。并且在設置時 font-size 應盡可能避免使用 px 。

我們在談論什么單位，它們是做什么的？

在我們討論為什么應該避免使用 px 作為 font-size 之前，讓我們確保我們都清楚我們正在談論哪些單位，以及它們的一般行為。

px

px 是像素的縮寫……雖然現在大多數情況下它不再是一個真正的像素。在顯示器通常是一個相對可預測的低分辨率像素比例，比如1024×768的時代， 1px 通常等于屏幕上的一個實際像素。

屏幕使用稱為像素的彩色光點陣來顯示圖像。一個像素是顯示器上的一個彩色光點；硬件能夠呈現的最小可能的“點”。這就是我在本節中所說的“字面上的”、“實際的”或“設備”像素；物理世界中的一個像素。

然而，當高分辨率（有時稱為“視網膜”）屏幕出現時，設備開始將更多的像素壓縮到更小的空間中，這些物理設備像素變得非常微小。在高分辨率屏幕上瀏覽網頁，如果CSS中的 1px 仍然對應于一個字面設備像素，那么甚至閱讀任何內容都將非常困難，因為像素本身正在迅速縮小。畢竟，現代智能手機的分辨率甚至比高清電視還要高。

所以現在， 1px 通常對應于放大的“縮放”像素的大小，而不是實際硬件上的字面像素。在我們的 CSS 中， 1px 的東西可能會占用多個物理硬件像素，而我們沒有任何純 CSS 的方法來指定一個字面設備像素。但這沒關系，因為它們通常太小了，我們不想去處理它們。

一個例子：iPhone 14 Pro 上的像素非常微小，16px 在字面上的設備像素大小大約相當于2pt字號的印刷字體大小。好在瀏覽器為我們縮放了它們！

大多數情況下，這些并不在本討論的語境中真正重要，但我認為了解這些還是很好的。重要的部分是：1px 等于瀏覽器視為單個像素的任何內容（即使在硬件屏幕上它不是真正的像素）。

em 和 rem

這就帶我們來到了 em 和 rem ，它們彼此相似。繼續講述不嚴格相關但仍然有趣的小知識："em" 是一個排版術語，實際上比計算機早了幾十年。在排版上，一個 em 等于當前字體大小。

如果你將字體大小設置為 32pt（“pt”是另一個仍然有時使用的舊排版術語），那么 1em 就是32pt。如果當前字體大小為 20px ，那么 1em = 20px。

在網頁上，默認字體大小為 16px 。一些用戶從不更改默認設置，但許多人會更改。但默認情況下， 1em 和 1rem 都將等于 16px 。

“Em” 最初是指 “M” 字符的寬度，這也是名稱的由來。但現在它指的是當前字體大小，而不是特定字形的尺寸。

EM 和 REM 之間的區別

為了區分這兩者：1rem 始終等于瀏覽器的字體大小，或者更準確地說是 html 元素的字體大小。rem 代表“根em”，而網頁的根是<html>標簽。因此， 1rem = document 字體大小。（默認情況下，這是 16px ，但可以被用戶覆蓋。）

另一方面，em是當前元素的字體大小。看下面的CSS：

.container {
  font-size: 200%;
}

p {
  font-size: 1em;
}

考慮到上述 CSS， .container 元素內的段落將會變成原來的兩倍大小。這是因為 1em 表示“當前字體大小”，在 .container 內，它是200%。1em × 200% = 2em （默認為 32px ）。

然而， .container 元素外的段落仍將是 1em 的正常字體大小（默認為 16px ）。

如果我們在上面的CSS中將 em 更改為 rem ，那么所有段落標簽的字體大小將始終是瀏覽器的默認大小，無論它們在哪里。

font-size: 1em 等同于 font-size: 100% 。em 和 % 單位在其他情況下并不總是等價的；例如， width: 1em 和 width: 100% 很可能會非常不同，因為此時百分比是基于父容器的寬度而不是其字體大小。但是，就 font-size 屬性而言， % 和 em 是相同的。

總結一下：

• 1em 是當前元素的字體大小。
• 1rem （根em）是文檔的字體大小（即瀏覽器的字體大小）。

好的，那就是單位的含義和來源。現在讓我們回答為什么使用哪個單位很重要。

為什么這一切都很重要

再次強調的誤解是：既然 1em 和 16px 相等，那么選擇哪個單位并不重要。這似乎是合理的；如果 16px = 1rem ，那么選擇哪種方式輸入似乎并不重要。

記住， em 和 rem 是相對的；默認情況下，它們都（最終）基于瀏覽器的字體大小。

2rem 是瀏覽器字體大小的兩倍；0.5rem 是其一半，依此類推。因此，如果用戶更改其首選字體大小，如果使用 em 和 rem ，則網站上的所有文本都會相應更改，就像應該的那樣。2rem 仍然是該字體大小的兩倍；0.5rem 仍然是其一半。

相比之下， px 值是靜態的。無論容器、瀏覽器或用戶的字體大小如何， 20px 只是 20px 。當設置靜態像素值時，無論用戶的字體偏好大小如何，它都會覆蓋該選擇并使用指定的確切值。

批判性地說，這意味著如果你的樣式表使用 px 在任何地方設置 font-size ，那么基于該值的任何文本都將無法由用戶更改。

那是非常糟糕的事情。它是不可訪問的，甚至可能會阻止某人完全使用該網站。

因此，雖然可能存在一些有效的用例來解釋這種行為，但它絕對不是你想要的默認行為。

這也是避免使用視口單位（如 vw 或 vh ）設置字體大小的非常好的理由。它們也是靜態的，用戶無法覆蓋。最多，像 calc(1rem + 1vw) 這樣的值可能是可以接受的，因為它仍然包含 rem 作為基礎。即便如此，我仍建議使用 clamp() 或媒體查詢來設置最小和最大值，因為屏幕尺寸往往遠遠超出我們所期望或測試的范圍。

超出字體大小的差異

好的，現在讓我們談談當我們不特別處理 font-size 屬性時， px 和 em / rem 如何變化。

開發人員通常通過縮放頁面來進行測試，我認為這就是本文中心誤解的來源。當你縮放時，所有內容都會被縮放（放大或縮小），在這種情況下，選擇 px 或 em / rem 作為你的CSS單位通常并不重要。就縮放而言，兩者的行為方式相同。而且，大多數視力良好的開發人員可能不會意識到其中還有更多內容。然而，棘手的問題是：

即使超出 font-size ， px 的行為也與 em 和 rem 不同。

px 單位仍然與屏幕上像素的縮放值相關聯。em 和 rem 與文檔的字體大小相關聯，而不是頁面的縮放或比例。

為了演示，請看這個 CodePen：

https://codepen.io/collinsworth/pen/WNyvvqY

HTML CSSResult Skip Results Iframe
EDIT ON
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam eum aliquam eveniet.</p>
<p>Sapiente delectus in ab excepturi, commodi placeat quaerat saepe voluptas sunt numquam.</p>
<p>Rerum veniam, quidem voluptatibus deleniti nihil consequatur blanditiis explicabo eum quos. Nam.</p>
<p>Natus necessitatibus delectus neque tenetur sint illum obcaecati similique sequi doloribus eligendi?</p>
<p>Eos quidem iure debitis dolorum repellendus ab incidunt ipsam suscipit, autem consequuntur?</p>

p {
  border-bottom: 2px solid black;
  margin-top: 0;
  margin-bottom: 20px;
}

我們有幾個段落，每個段落底部有 2px 邊框，并且它們之間有 20px 邊距。請注意，我們對兩者都使用 px 單位。

如果你放大或縮小，元素的大小和距離保持相對不變。也就是說：你放大得越多，那條線就越粗，段落之間的間距就越大。

為了方便起見，這里有一張截圖，顯示了同一支筆的400％縮放。文本、線條和間距都變大了4倍；它們相對于彼此的大小保持不變：

當涉及到縮放時， px 、 em 或 rem 之間沒有真正的區別。但縮放并不是用戶使網站更易用的唯一方法。

如前所述，用戶還可以指定默認和/或最小字體大小。當他們這樣做時，功能開始分歧。

在下面的截圖中，我已將Firefox的默認字體大小設置為 64px 。看一下：

將屏幕截圖中的文本與其上方的文本進行比較。請注意，這一次，行并沒有變粗，段落之間的邊距也沒有成比例增加。只有文本本身變大了。因為邊框寬度和邊距都是在 px 中設置的，它們保持不變，不會縮放。

但是請注意，如果將CSS中的 px 更改為相應的 rem 值，會發現線條和間距確實變大了！(zh-Hans)

所以，這里的總結是：

• 當用戶更改字體大小時， px 值不會縮放。
• em 和 rem 的值會隨字體大小成比例調整。

如果你想要一個交互式演示，將所有這些內容聯系在一起，請查看最終的 CodePen；調整頂部的滑塊以查看修改文檔字體大小對各種元素的影響，基于它們使用的 CSS 單位。https://codepen.io/collinsworth/pen/KKepeMQ

選擇哪一個

因此，知道 em 和 rem 會隨字體大小縮放，但 px 值不會，那么我們該怎么辦？我們應該永遠不使用 px 嗎？

雖然我認為如果你選擇這條路，你可能會沒事，但我仍然認為 px 有其存在的意義。

我們知道當用戶調整字體大小時 px 值不會改變，這意味著像素單位實際上是某些美學元素的不錯選擇。也許我們有一定的間距，我們不希望在字體大小變大時變得更大。（如果默認情況下是一個大塊的負空間，也許允許它縮放到更大的尺寸是沒有意義的。）

也許有一些邊框大小我們不想改變，或者頁面上有用 CSS 創建的裝飾元素，在更大的字體大小下看起來效果不佳。也許我們不希望填充隨著字體大小的增加而膨脹。在所有這些情況下， px 仍然是一個不錯的選擇。

我個人建議使用 rem 來設置所有的大小。我只在想要與當前字體大小成比例的東西（例如，與一些文本旁邊的圖標應該與字符的高度完全相同，并且在一側有半個字符的情況）中添加 em 。我不會在任何地方使用 px ，除非是明確不想隨字體大小縮放的設計元素。

永遠不要用 px 單位中設置 font-size ，除非你非常確定你在做什么，它會如何行動，以及在你這樣做時它是否仍然可訪問。

關于媒體查詢的重要說明

出于與上述所有原因相同的原因，重要的是要避免在 @media 查詢中使用 px ；當用戶縮放時，它將正常工作，但是使用 px 的媒體查詢將在用戶自己設置更大的字體大小時失敗。

@media (min-width: 800px) {
  /* Changing font size does NOT affect this breakpoint */
}

@media (min-width: 50rem) {
  /* Changing font size DOES affect this breakpoint */
}

這是因為隨著字體大小的增加， 50rem 會根據用戶的偏好變成不同的值，而 800px 則不會。

很可能，當我們為較大的斷點編寫CSS時，我們認為有足夠的屏幕空間讓元素擴展。如果用戶設置了非常大的字體大小，則可能不是這種情況，將媒體查詢設置為 rem 而不是 px 可以幫助我們避免這種假設并響應用戶的偏好。

我在這個網站上遇到了這個問題；我把所有的斷點都設置在 px 上。然而，當我將默認字體大小設置得更大時，我的媒體查詢沒有響應，因為它們仍然只查看屏幕的像素寬度。因此，我仍然有一個微小的側邊欄，里面塞滿了難以辨認的巨大文本，因為我沒有考慮用戶的偏好。在那之后，我立即改為 rem ，問題得到了解決。

簡而言之：在媒體查詢中，除非您確定自己知道在瀏覽器中設置自己的字體大小會對用戶產生什么影響，否則一定要避免使用 px 。

原文：https://joshcollinsworth.com/blog/never-use-px-for-font-size

近做一個電視大屏，大屏分為三個部分，又分為上下結構，下部分分為左右結構布局，第一個部分是設備架構圖、第二個部分是本市設備網點告警圖，第一、二部分是我自己開發的，采用自動計算、自動適配各種場景縮放，兼容性沒有任何問題；第三部分是切入第三方的頁面，第三方只提供一個訪問地址；其他什么都不管，

遇到的問題是第三個模塊切入第三方的頁面；顯示不全；沒法適配，在現有的容器中是沒法裝下第三方頁面的內容，大部分溢出了，而且第三方頁面寫了最小高度和最小寬帶控制，如下圖所示

因為是第三方的頁面，沒法修改他們的東西，也沒法要求他們修改東西，而且他們不樂意配合我這邊工作，

最后我是這樣解決的；采用CSS transform 屬性；transform 屬性向元素應用 2D 或 3D 轉換。允許我們對元素進行旋轉、縮放、移動或傾斜。結合transform-origin屬性；

代碼如下

<style type="text/css">

.pgIframe{

width: 1920px;

height: 1080px;

transform-origin: top left;

transform:scale(0.47,0.33);

}

</style>

<iframe width="100%" height="100%" class="pgIframe" src="http:137.89.47.253/yun/yunIndex.html"></iframe>

問題基本解決了80%了；這時候又冒出一個問題；有個白色的邊框

帶有白色邊框，影響了整體的顯示效果；再次修改iframe，添加了frameborder="no" scrolling="no"屬性；

<iframe marginwidth="0" marginheight="0" width="100%" height="100%" class="pgIframe" src="http:137.89.47.253/yun/yunIndex.html" frameborder="no" scrolling="no"></iframe>

問題得以完美解決，效果圖如下

最終效果圖如下圖所示

完美解決了大屏顯示問題；其實就是利用率他的縮放原理，把第三方的頁面按照16:9的場景進行縮小；以達到適配這邊固定容器內顯示的效果；

注：所有數據均為模擬數據，不是實際生產環境真實數據，

如果你有更好的解決方案，歡迎留言討論交流，共同學習，