前端面试总结二

一、响应式和自适应的区别:

联系(相同点):

响应式设计(responsive design)和自适应设计(adaptive design)都是用来解决网页在不同分辨率的屏幕和设备上展示的一项技术(或者说一种方法)。

区别:

响应式设计:通过CSS Media Queries(css媒体查询),Content-Based Breakpoint(基于内容的断点)等技术来改变网页的大小以适应不同分辨率的屏幕。

例如 bootstrap 里的断点就是 768px, 992px, 1200px。

小于 768px 是针对极小的设备(Extra small devices),如手机。

大于等于 768px 小于 992px 是针对小设备(Small devices),如平板电脑的竖屏情况。

大于等于 992px 小于 1200px 是针对中等设备(Medium devices),如平板电脑的横屏模式,或者分辨率较低的电脑。

大于等于 1200px 是针对大屏幕设备(Large devices),如分辨率较高的电脑。

响应式设计是浏览器在本地监听分辨率大小的变化,做出不同的反应。

自适应设计:为不同类别的设备设计不同的网页,检测到设备分辨率大小后调用相应的网页。

自适应设计是浏览器发送用户请求到服务器,服务器通过设备信息作出判断,把对应的样式,HTML文档,JS等返回给浏览器渲染。

从知乎(https://www.zhihu.com/question/20628050?rf=24334181) 关于响应式设计和自适应设计的区别这篇文章中,找来一张图片:

从图中可以看出,响应式设计是一对多的方式,自适应设计是一对一的方式。换句话说,响应式设计用一套代码写出的网页适应多个设备,而自适应设计用一套代码写出的网页自适应一个设备,不同的设备需要单独定义。

 

二、360 浏览器的兼容模式

360 浏览器有两种渲染模式:一种是使用 chrome 内核的极速模式(默认情况下),一种是使用 IE 内核的兼容模式。

那兼容模式下具体用的 IE 的哪一个版本呢?调用的系统的 IE

可以验证下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>验证 360 浏览器兼容模式下 IE 内核的版本</title></head><body>        <div id="example"></div><script>txt = "<p>浏览器版本: " + navigator.appVersion + "</p>";document.getElementById("example").innerHTML=txt;</script></body>
</html>

windows7 系统下 360 浏览器兼容模式:

也即是说 window 系统自带的是哪一个 IE 版本,360兼容模式就使用的哪一个 IE 版本。如 Win7 附带 IE8,那么 Win7 系统下 360 浏览器兼容模式就是使用的 IE8 版本。

从上图中可以看出 windows8 自带 IE10,windows8.1 自带 IE11。另外 windows10 自带 IE11 和 edge,那 windows10 下 360浏览器的兼容模式是使用的 IE11

转载于:https://www.cnblogs.com/xinjie-just/p/6375847.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/371564.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【看番杂感】Clannad系列观后感(剧透慎入)

前言 之前看第一季时&#xff0c;弹幕里总有人在刷“写作cl&#xff0c;读作人生”。当时我想&#xff0c;盲目把一部催泪番上升到人生的高度&#xff0c;这未免有些武断&#xff0c;也是对作品本身的不尊重。当看完第二季的我蓦然回首&#xff0c;发现这才是最最贴切的评价&am…

Centos7 开机显示 ERST: Failed to get Error Log Address Range” 导致无法开机解决方法

开机显示 ERST: Failed to get Error Log Address Range” 导致无法开机&#xff0c;也无法重新安装系统&#xff0c;解决方法&#xff1a;开机进入BIOS &#xff0c; 关闭ACPI选项即可正常开机 转载于:https://www.cnblogs.com/zhangjianghua/p/6376811.html

Spring MVC 3模板和Apache Tiles

对于任何Web应用程序而言&#xff0c;有效的设计考虑因素是使用模板引擎&#xff08;或工具&#xff09;&#xff0c;并且由于具有Spring的“可插拔”特性&#xff0c;因此集成模板机制&#xff08;例如Apache Tiles&#xff09;的确要容易得多。 在这篇简单的文章中&#xff0…

js 判断浏览器是否64位

js判断是否64位 浏览器 navigator.userAgent.match(/x64/i); 转载于:https://www.cnblogs.com/fanlinglong/p/7298733.html

浙江大学linux网络通信,浙江大学钟财军副教授——“Wireless Powered Communication Networks”...

2016年5月17日&#xff0c;浙江大学钟财军副教授应徐正元教授邀请在中科大西区科技实验楼东楼十层1011会议室做了一场题为“Wireless Powered Communication Networks”的学术报告。报告会由龚晨教授主持&#xff0c;共50余名师生参加。此次报告会得到了“中科院无线光电通信重…

[基础]PeopleSoft中的作业和调度作业集合定义

PeopleSoft进程调度器可以使一个或多个进程作为一个组。这个组在PeopleSoft中被称为作业(Job)。 PeopleSoft进程被定义为单个任务&#xff0c;程序或例程&#xff0c;例如cobol程序或AE程序或客户端运行的SQR。 作业由一个或多个相同或不同类型的进程组成&#xff0c;他们作为一…

win10 hyper-v 虚拟机ping不通宿主机问题

在Windows10 Hyper-V 中安装 Linux (Centos6.9)虚拟机无法 ping 通宿主机 这种情况下关闭 Windows 防火墙就能ping通了&#xff0c;当然关闭防火墙不安全。所以需要 做以下步骤: 控制面板-》系统和安全-》Windows防火墙-》高级设置-》入站规则 启用下图被红框选中的两个选…

Java枚举:您拥有优雅,优雅和力量,这就是我所爱!

当Java 8即将面世时&#xff0c;您确定您对Java 5中引入的枚举很了解吗&#xff1f; Java枚举仍然被低估了&#xff0c;很可惜&#xff0c;因为它们比您想象的要有用&#xff0c;它们不仅仅用于通常的枚举常量&#xff01; Java枚举是多态的 Java枚举是可以包含行为甚至数据的…

2)网页请求顺序

&#xff08;1&#xff09;分析浏览器访问一个网页的完整流程逻辑过程&#xff1a;http&#xff1a;//www.abc.com/def/ 转载于:https://www.cnblogs.com/xiaoyoucai/p/7306246.html

JavaOne 2012:调查JVM水晶球

我回到了希尔顿的A / B广场参加星期一的第四届会议&#xff0c;但首先去了希尔顿的顶层收拾午餐。 我每年都在JavaOne的第一天被提醒&#xff0c;涉及到每个人的第一天的午餐获取过程令人惊讶地令人沮丧。 我知道我在JavaOne的第一年的经历使我有些困惑&#xff0c;因为我不确定…

Jquery Memo

jQuery选择器 $( "#id" ) $( ".class" )$( "element" )全选择器&#xff08;*选择器&#xff09; * {padding: 0; margin: 0;}//子选择器 //$(div > p) 选择所有div元素里面的子元素P//后代选择器 //$(div p) 选择所有div元素…

使用JMSTester对JMS层进行基准测试

对于我去过的大多数客户端&#xff0c;使用ActiveMQ扩展JMS消息传递层是一个优先事项。 有多种方法可以实现这一目标&#xff0c;但毫无疑问&#xff0c;创建基准测试并在实际硬件上分析架构&#xff08;或者正如我的同事Gary Tully所说的“询问机器”&#xff09;是第一步。 但…

Js引擎解析执行 阅读笔记

Js引擎解析执行 阅读笔记 一篇阅读笔记http://km.oa.com/group/2178/articles/show/145691?kmrefsearch&from_page1&no1 早期:遍历语法树 Js引擎最早使用的是遍历语法树方式 &#xff08;syntax tree walker&#xff09; 分为两步 词法分析语法分析词法分析 i a b *…

c语言长空格的代码是什么,c语言中表示空格的是什么代码?

分析如下&#xff1a;不是所有字符都需要转义的&#xff0c;空格直接就敲空格&#xff0c;或者使用ASCII码值赋值为32。空格没有转义字符。合法转义字符如下&#xff1a;\a 响铃(BEL) 、\b 退格(BS)、\f 换页(FF)、\n 换行(LF)、\r 回车(CR)、\t 水平制表(HT)、\v 垂直制表(VT)…

JavaOne 2012:101种改进Java的方法-开发人员参与为何如此重要

Bruno Souza &#xff0c; Martijn Verburg和Heather Vancura在希尔顿酒店的大陆宴会厅4中展示了“ 101种改进Java的方法&#xff1a;开发人员参与为何如此重要”。 他们将其分为自己最熟悉的领域。 SouJava的创始人兼协调员 Souza谈到了通过用户组的更大参与。 Verberg也在伦敦…

评论:Arun Gupta撰写的“ Java EE 6 Pocket Guide”

这是我很高兴写的评论。 我的朋友阿伦&#xff08;Arun&#xff09;发布了Java EE 6袖珍指南&#xff0c;该指南将在您订购时尽早提供。 我很早就知道这本书&#xff0c;因为我很乐意对其进行回顾&#xff0c;也感谢有机会为本书做出一点贡献&#xff01; Kindle版本已经可用&a…

双android手机同步工具,手机同步软件Android Manager使用图文教程

类型&#xff1a;手机工具大小&#xff1a;23.6M语言&#xff1a;繁体 评分&#xff1a;6.6标签&#xff1a;立即下载Android Manager 可透过五个简单的步骤设定&#xff1a;步骤一. 在计算机上安装 Android Manager请点选以下之下载按钮或直接于计算机上输入下载网址&#xff…

android拍照截图组件,Android截图命令screencap与视频录制命令screenrecord(示例代码)...

查看帮助命令[email protected] ~$ adb shell screencap -vscreencap: invalid option -- vusage: screencap [-hp] [-d display-id] [FILENAME]-h: this message-p: save the file as a png.-d: specify the display id to capture, default 0.If FILENAME ends with .png it …

Python-Matplotlib 18 注释

Python-Matplotlib 18 注释 EG1: import numpy as np import matplotlib.pyplot as plty np.arange(-5, 6,1) plt.plot(y, y*y) plt.annotate(Annotate , xy(0,1) , xytext(0,5) ,arrowpropsdict(facecolorr , frac0.2 ))plt.show()转载于:https://www.cnblogs.com/zsr0401/p/…

while和for循环

循环结构图&#xff1a; 循环结构主要分为两种&#xff1a;有while和for两种循环&#xff0c;while又分为do{...}while和while{...},do...while表示先执行后判断&#xff0c;而while循坏表示先判断后执行&#xff0c;如果循环条件都不满足的情况下&#xff0c;do...while至少执…