1. 响应式网页的主流技术有哪些
响应式网页的主流技术有哪些？当不同类型的终端加载web页面或调整浏览器大小时，页面会根据媒体类型或浏览器宽度加载不同的CSS样式，重新设置页面并显示不同的内容和布局效果。流程布局是响应性web页面的主要技术，以百分比表示。当分辨率或浏览器宽度发生变化时，可以平滑地缩放页面元素，避免用户的视觉跳跃感。也可以避免传统固定布局中的水平滚动条。流式布局也有一些缺点，屏幕大小会在小屏幕和大屏幕之间变化，同样的布局设计不能提供良好的视觉体验。
例如，一些文本在电脑上显示的行宽会满足用户的视觉效果，但在移动端会显得太窄，影响用户的浏览。元素的大小(百分比)基于其父元素的宽度。当有许多层次的元素嵌套时，计算机就更麻烦了。移动布局还需要结合媒体查询方法，对不同分辨率设备的网页风格响应策略进行优化，达到更好的效果。弹性布局主要以EM和REM为元素单位，而REM以HTML根元素的大小为参考进行计算，解决了百分比计算的缺陷，使网页设计更加方便高效。只有REM不实现响应布局;它还需要结合JavaScript或媒体查询技术。
响应式网页的主流技术有哪些？同时，REM作为字体大小的单位，结合媒体查询技术，可以轻松控制不同设备上字符的字体大小。弹性图像技术可以实现图像随屏幕尺寸的变化而平滑过渡，适应变焦，实现响应的变化。同时，提出了大分辨率和小分辨率的图像设计方案。结合媒体查询技术，大分辨率设备使用大分辨率图像，小分辨率设备使用小分辨率图像，即大屏幕加载大图像，小屏幕加载小图像。响应式web的主流技术有利于提高web页面的加载速度，节省存储空间。引导框架是一个用于前端开发的开放源码工具包。它是响应式Web设计中最流行和常用的框架。它基于HTML5、CSS3、jQuery和javascrip技术，为开发者提供了多种响应组件。它将一组CSS样式和效果代码封装在不同的文件中，以便于使用。
以上就是有哪些响应式网页的主流技术?的主要内容，如果你想了解ui设计的基本知识，并且将他们运用到您的作品中，那么本文一定会给你有效的帮助。如果你想学习更多关于ui设计的知识或资讯等，可以点击本站其他文章进行学习。
2. Web是什么意思
web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。
是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
Web就是一种超文本信息系统，Web的一个主要的概念就是超文本链接。它使得文本不再像一本书一样是固定的线性的，而是可以从一个位置跳到另外的位置并从中获取更多的信息。
还可以转到别的主题上。想要了解某一个主题的内容只要在这个主题上点一下，就可以跳转到包含这一主题的文档上。正是这种多连接性把它称为Web。
(2)web中可以识别媒体类型和特征的是扩展阅读：
web的特点：
1、图形化
Web 非常流行的一个很重要的原因就在于它可以在一页上同时显示色彩丰富的图形和文本的性能。在Web之前Internet上的信息只有文本形式。Web可以提供将图形、音频、视频信息集合于一体的特性。
2、与平台无关
无论用户的系统平台是什么，都可以通过Internet访问WWW。浏览WWW对系统平台没有什么限制。无论从Windows平台、UNIX平台、Macintosh等平台我们都可以访问WWW。
对WWW的访问通过一种叫做浏览器（browser）的软件实现。如Mozilla的Firefox、Google的Chrome、Microsoft的Internet Explorer等。
3、分布式的
大量的图形、音频和视频信息会占用相当大的磁盘空间，我们甚至无法预知信息的多少。对于Web没有必要把所有信息都放在一起，信息可以放在不同的站点上，只需要在浏览器中指明这个站点就可以了。在物理上并不一定在一个站点的信息在逻辑上一体化，从用户来看这些信息是一体的。
4、动态的
由于各Web站点的信息包含站点本身的信息，信息的提供者可以经常对站上的信息进行更新。如某个协议的发展状况，公司的广告等等。一般各信息站点都尽量保证信息的时间性。所以Web站点上的信息是动态的、经常更新的，这一点是由信息的提供者保证的。
5、交互的
Web的交互性首先表现在它的超链接上，用户的浏览顺序和所到站点完全由他自己决定。另外通过FORM的形式可以从服务器方获得动态的信息。用户通过填写FORM可以向服务器提交请求，服务器可以根据用户的请求返回相应信息。
参考资料来源：网络-web
3. 什么叫media query
Media Queries详解
Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码：
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
或者这样的形式：
<style type="text/css" media="screen">
@import url("css/style.css");
</style>
不知道大家留意没有，其中两种方式引入CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，
如屏幕（screen）和打印（print）的样式表，当然还有其他的，比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。有关于更多的Media类型，可以点击这里。
上面简单说了一下HTML4和CSS2的“Media Queries”,而今天的主要是来学习CSS3中的"Media Queries"的更多使用方法和相关知识，下面我们开始进入今天的主题。
CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的 样式表。
换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。
现在最常见的一个 例子，你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，
让你制 作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。
首先来看一个简单的实例：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：
1、screen：这个不用说大家都知道，指的是一种媒体类型；
2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；
3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。
前面这个简单的实例引出两个概念性的东西，一个就是媒体类型（Media Type）和 媒体特性（Media Query），首先一起来理解一下这两个概念：
一、媒体类型(Media Type)
媒体类型(Media Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是 all（全部）,screen（屏幕）
,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。
页面中引入媒体类型方法也有多种：
1、link方法引入
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
2、xml方式引入
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
3、@import方式引入
@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是 在<head>>/head>中的<style>...</style>中引入，单这种使用方法在 ie6-7都不被支持 如
样式文件中调用另一个样式文件：
@import url("css/reset.css") screen;
@import url("css/print.css") print;
在<head>>/head>中的<style>...</style>中调用：
<head>
<style type="text/css">
@import url("css/style.css") all;
</style>
</head>
4、@media引入
这种引入方式和@imporr是一样的，也有两种方式：
样式文件中使用：
@media screen{
选择器{
属性：属性值；
}
}
在<head>>/head>中的<style>...</style>中调用：
<head>
<style type="text/css">
@media screen{
选择器{
属性：属性值；
}
}
</style>
</head>
以上几种方法都有其各自的利弊，在实际应用中我建议使用第一种和第四种，因为这两种方法是在项目制作中是常用的方法，对于他们的具体区别，我就不说了，想了解的大家可以去找度娘或G爸，
他们能帮你解决。
二、媒体特性（Media Query）
前面有简单的提到，Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。
具体的可以参阅：Media features。为了更能理解Media Query，我们在次回到前面的实例上：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
转换成css中的写法为：
@media screen and (max-width: 600px) {
选择器 {
属性：属性值；
}
}
其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){...}的大括号之中。在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：
1、Media query只接受单个的逻辑表达式作为其值，或者没有值；
2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；
3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况
4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种
常用的Media Query如下表所示：
兼容的浏览器：
下面我们一起来看看Media Queries的具体使用方式
一、最大宽度Max Width
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。
二、最小宽度Min Width
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />
上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。
三、多个Media Queries使用
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。
正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。
四、设备屏幕的输出宽度Device Width
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率
五、iPhone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
上面的样式是专门针对iPhone4的移动设备写的。
六、iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />
在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说 上面的例子，在纵向(portrait)时采用portrait.css来渲染页面；
在横向（landscape）时采用landscape.css来渲 染页面。
七、android
/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />
我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。
八、not关键字
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。
九、only关键字
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。
其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，
因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。
十、其他
在Media Query中如果没有明确指定Media Type，那么其默认为all，如：
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
另外还有使用逗号（，）被用来表示并列或者表示或，如下
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。
关于Media Query的使用这一节就介绍到此，最后总体规纳一下其功能，个人认为就是一句话：Media Queries能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。
4. MIME是用来处理Web中什么的
MIME(Multipurpose Internet Mail Extensions功能Internet 邮件扩充服务) 是一组扩充协议。起初应用于Pop3/SMTP协议上，是E-mail格式的一种扩展，允许邮件传递非文本数据、附件、内容的格式和不同的字符集。MIME被设计的向后兼容，意思是即使你的邮件客户端无法识别MIME，也不会影响邮件文本内容的正确显示。
后来MIME的应用范围得到扩展，HTTP（网页浏览）使用MIME内容类型在网页上显示不同的类型的内容，其作用是描述网页内提供内容的类型、内容以保证浏览器能够正确识别信息内的多媒体数据的类型并加以正确处理。（ 通过MIME，消息能包含文本、图像、音频、视频以及其他应用程序专用的数据）
官方的 MIME 信息是由 Internet Engineering Task Force (IETF) 在下面的文档中提供的：
RFC-822 Standard for ARPA Internet text messages
RFC-2045 MIME Part 1: Format of Internet Message Bodies
RFC-2046 MIME Part 2: Media Types
RFC-2047 MIME Part 3: Header Extensions for Non-ASCII Text
RFC-2048 MIME Part 4: Registration Proceres
RFC-2049 MIME Part 5: Conformance Criteria and Examples
5. web中什么可以识别媒体类型和特征
mime类型？
6. web表现标准语言css
单的说，就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。
web标准的优点：
代码的效率：
在HTML文件中使用最精简的代码，而把样式和页面布局信息包含进CSS文件中。则放在服务器上的文件越小，下载文件需要的时间就越短。
可用性：
产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力。
可维护性：
页面的样式和布局信息保存在单独的CSS文件中，如果你想改变站点的外观时，仅需要在单独的CSS文件中做出更改即可。整站统一css则可带来巨大的便利。
可访问性：
上网用户中那些视力受损的人，通过屏幕阅读器使用键盘命令将网页的内容读给他们听。以语义化的HTML（结构和表现相分离的HTML）编写的网页文件，就可以让此类用户更容易导航，且网页文件中的重要信息也更有可能被这些用户找到。
语义化标签利于 网络爬虫/搜索引擎：搜索引擎使用“爬虫”，解析你的网页。语义化的HTML能更准确更快速的被解析，从而知道哪些才是重要的内容，那么你的网页在搜索结果中的排名就会大受影响。
兼容性：
纯HTML，无附加样式信息，可以针对具有不同特点（如屏幕尺寸等）的设备而被重新格式化，只需要引用一套另外的样式表即可。同时，CSS本身也可以让你为不同的呈现方式和媒体类型（如在屏幕上阅读网页，打印网页，在移动设备上阅读网页等）规定不同的样式表。
7. 网络：什么是 MIME TYPE
https://www.cnblogs.com/jsean/articles/1610265.html
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types
最近在读 Golang 的源码，看到 mime.go 这个文件时，有点看不懂了。
MIME, Mutipurpose Internet Mail Extensions,多用途 Internet 邮箱扩展。MIME 是描述消息内容类型的 internet 标准。在创建之初，是为了在发送电子邮件时附加多媒体数据，让邮件客户程序根据其类型进行处理。现在 MIME TYPE 被 HTTP 协议支持后，使得HTTP能够传输各种各样的文件。
浏览器通过 MIME TYE,也就是该资源的媒体类型，来决定以什么形式显示数据。
媒体类型通常是通过 HTTP 协议，由 Web 服务器请求头中的 Content-Type 来告知浏览器数据类型的，比如：
表示内容是 text/HTML 类型，也就是超文本文件。注意，必须是 "text/HTML" 而不是 "HTML/text".因为 MIME 是经过 ietf 组织协商，以 RFC 的形式发布在网上的。
需要注意的是： 只有一些在互联网上获得广泛应用的格式才会获得一个 MIME Type ，如果是某个客户端自己定义的格式，一般只能以 application/x- 开头。
Internet 中有一个专门组织来对 MIME 标准进行修订，但是由于 Internet 发展过快，很多应用程序便使用在类别中以 x- 开头的方法标识这个类别还没有成为标准，例如 x-gzip,x-tar等。
其实是不是标准无关紧要，只要客户端和服务器都能识别这个格式就可以了。在 app 端会使用自定义标准来保证数据安全。
MIME类型与文档的后缀相关，因此服务器使用文档的后缀来区分不同文件的 MIME 类型，服务器中必须规定文件后缀和MIME类型之间的对应关系。而客户端从服务器上接收数据的时候，它只是从服务器接收数据流，并不了解文档的名字，因此服务器需要使用附加信息来告诉客户程序数据的 MIME 类型。服务器将首先发送以下两行 MIME 标识信息，这个信息并不是真正的数据文件的一部分。
注意，第二行为一个空格，这是必须的，使用这个空行的目的是将 MIME 信息与真正的数据内容分离开。
通用结构： type/subtype
MIME 类型对大小写不敏感，但是通常传统写法是小写。
分类
对于 text 文件类型若是没有特定的 subtype，就使用 text/plain, 类似的二进制文件如果没有特定或已知的 subtype，就使用 application/octet-stream.
还有非MIME 类型，但是比较通用的 icon 类型，image/x-icon
8. 贵阳北大青鸟：Web测试的经验
1.功能测试1.1.链接测试链接是Web应用系统的一个主要特征，它是在页面之间切换和指导用户去一些不知道地址的页面的主要手段。
链接测试可分为三个方面。
首先，测试所有链接是否按指示的那样确实链接到了该链接的页面;其次，测试所链接的页面是否存在;最后，保证Web应用系统上没有孤立的页面，所谓孤立页面是指没有链接指向该页面，只有知道正确的URL地址才能访问。
链接测试可以自动进行，现在已经有许多工具可以采用。
链接测试必须在集成测试阶段完成，也就是说，在整个Web应用系统的所有页面开发完成之后进行链接测试。
1.2.表单测试当用户给Web应用系统管理员提交信息时，就需要使用表单操作，例如用户注册、登陆、信息提交等。
在这种情况下，我们必须测试提交操作的完整性，以校验提交给服务器的信息的正确性。
例如：用户填写的出生日期与职业是否恰当，填写的所属省份与所在城市是否匹配等。
如果使用了默认值，还要检验默认值的正确性。
如果表单只能接受指定的某些值，则也要进行测试。
例如：只能接受某些字符，测试时可以跳过这些字符，看系统是否会报错。
1.3.Cookies测试Cookies通常用来存储用户信息和用户在某应用系统的操作，当一个用户使用Cookies访问了某一个应用系统时，Web服务器将发送关于用户的信息，把该信息以Cookies的形式存储在客户端计算机上，这可用来创建动态和自定义页面或者存储登陆等信息。
如果Web应用系统使用了Cookies，就必须检查Cookies是否能正常工作。
测试的内容可包括Cookies是否起作用，是否按预定的时间进行保存，刷新对Cookies有什么影响等。
1.4.设计语言测试Web设计语言版本的差异可以引起客户端或服务器端严重的问题，例如使用哪种版本的HTML等。
当在分布式环境中开发时，开发人员都不在一起，这个问题就显得尤为重要。
除了HTML的版本问题外，不同的脚本语言，例如Ja、JaScript、ActiveX、VBScript或Perl等也要进行验证。
1.5.数据库测试在Web应用技术中，数据库起着重要的作用，数据库为Web应用系统的管理、运行、查询和实现用户对数据存储的请求等提供空间。
在Web应用中，最常用的数据库类型是关系型数据库，可以使用SQL对信息进行处理。
在使用了数据库的Web应用系统中，一般情况下，可能发生两种错误，分别是数据一致性错误和输出错误。
贵阳北大青鸟http://www.kmbdqn.cn/认为数据一致性错误主要是由于用户提交的表单信息不正确而造成的，而输出错误主要是由于网络速度或程序设计问题等引起的，针对这两种情况，可分别进行测试。
9. web是什么
web，全称为World Wide Web，是全球广域网的简称，也称为万维网，是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。
表现形式
1、超文本（Hyper text）
超文本是一种用户接口方式，用以显示文本及与文本相关的内容。现时超文本普遍以电子文档的方式存在，其中的文字包含有可以链接到其他字段或者文档的超文本链接，允许从当前阅读位置直接切换到超文本链接所指向的文字。
2、超媒体（hypermedia）
超媒体是超级媒体的简称。是超文本（hypertext）和多媒体在信息浏览环境下的结合。用户不仅能从一个文本跳到另一个文本，而且可以激活一段声音，显示一个图形，甚至可以播放一段动画。
3、超文本传输协议（HTTP，HyperText Transfer Protocol)
超文本传输协议是互联网上应用最为广泛的一种网络协议。
(9)web中可以识别媒体类型和特征的是扩展阅读：
万维网使得全世界的人们以史无前例的巨大规模相互交流。相距遥远的人们，甚至是不同年代的人们可以通过网络来发展亲密的关系或者使彼此思想境界得到升华，甚至改变他们对待小事的态度以及精神。情感经历、政治观点、文化习惯、表达方式、商业建议、艺术、摄影、文学都可以以人类历史上从来没有过的低投入实现数据共享。
尽管使用万维网仍然要依靠于存在自身缺陷的物化的工具，但至少它的信息保存方式不是使用人们熟悉的方式如图书馆、出版物那样实在的东西。因此信息传播是经由万维网和英特网来实现，而无须被搬运具体的书卷，或者手工的或实物的复制而限制。而且数字储存方式的优点是，你可以比查阅图书馆或者实在的书籍更容易有效率地查询网络上的信息资源。