、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的场景进行缩小；以达到适配这边固定容器内显示的效果；

注：所有数据均为模拟数据，不是实际生产环境真实数据，

如果你有更好的解决方案，欢迎留言讨论交流，共同学习，