前端响应式布局（响应式布局 怎么用css写响应式）

本文目录

• 响应式布局 怎么用css写响应式
• 几种网页布局方式
• HTML 固定宽度改为响应式布局需要怎么做
• 四十二、移动端web开发之响应式布局
• 前端几种常见的布局方式
• 响应式布局的核心技术是什么
• 前端响应式是怎么回事
• Web前端面试题：响应式布局有哪些优点和缺点
• 前端布局的几种方式

响应式布局 怎么用css写响应式

做响应式网站离不开CSS响应式布局查询代码写法，而在此之前，我们需要了解什么是媒体查询以及如何才CSS中引入媒体查询。

什么是媒体查询？
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color（等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

如何在CSS中引入媒体查询？
媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式。

如何用CSS做响应式布局呢？
1、在HTML头部添加以下代码，用来显示兼容移动设备的显示效果。
《meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /》
参数详解：
width=device-width ：宽度等于当前设备的宽度
initial-scale=1 ：初始的缩放比例（默认为1）
minimum-scale=1 ：允许用户缩放到的最小比例（默认为1）
maximum-scale=1 ：允许用户缩放到的最大比例（默认为1）
user-scalable=no ：用户是否可以手动缩放（默认为no）

2、引入包含Media的CSS文件
一般情况HTMLCSS代码都是分开写的，Media也不例外。
《link rel="stylesheet" type="text/css" href="m320.css" media="only screen and (max-width:320px)"/》
《link rel="stylesheet" type="text/css" href="m480.css" media="only screen and (min-width:321px) and (max-width:375px)"/》

3、写Media中的代码
以某个网页的响应式布局为例
结构:@media设备类型and (设备特性)｛样式代码｝
/*媒体查询*/
/*当页面大于1200px时，大屏幕，主要是PC端*/
@media (min-width: 1200px) {
}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
#adver .center {
width: 50%;
margin: -10px 0 0 -25%;
}
main .center h3 {
font-size: 40px;
}
}
/*768和991像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
#adver .center {
width: 60%;
margin: -10px 0 0 -30%;
}
#adver .search, #adver .button {
font-size: 20px;
}
main .center h3 {
font-size: 35px;
}
}
/*在480和767像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
header, header .center, header .link {
height: 45px;
}
header .logo, .sm-hidden,.sidebar,.md-hidden {
display: none;
}
header .link {
width: 100%;
line-height: 45px;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 70%;
height: 53px;
margin: -10px 0 0 -35%;
}
#adver .search, #adver .button {
height: 45px;
font-size: 18px;
}
.sm-visible {
display: block;
}
main .center h3 {
font-size: 30px;
}
main .center p {
font-size: 15px;
}
main figure {
width: 49.2%;
}
}
/*在小于480像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
header, header .center, header .link {
height: 45px;
}
header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden {
display: none;
}
header .link {
width: 100%;
line-height: 45px;
}
header .link li {
width: 25%;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 80%;
height: 48px;
margin: -10px 0 0 -40%;
}
#adver .search, #adver .button {
height: 40px;
font-size: 16px;
}
.sm-visible {
display: block;
}
footer .bottom, footer .version {
font-size: 13px;
}
main .center h3 {
font-size: 26px;
}
main .center p {
font-size: 14px;
}
main figure {
width: 99%;
}
}
响应式布局的原理就是在不同的窗口大小下显示不同的结构和样式。只要掌握好CSS的样式，响应式布局就没问题。

几种网页布局方式

1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。

2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。

3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。

4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。

注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的。

HTML 固定宽度改为响应式布局需要怎么做

HTML 固定宽度改为响应式布局需要怎么做 不要用固定宽度属性来描述元素，改用百分比，这样元素的宽度就是父元素的百分比，这是响应式布局最基本的技巧。
采用响应式布局，需要注意以下几点：第一，用百分比给元素设定大小；第二，不要对元素进行绝对定位；第三，写css时用上@media媒体查询技巧。bootstrap是响应式布局做得不错的前端开发工具，有兴趣可以学习一下。
随着终端萤幕尺寸的种类越来越多，如果针对每一种尺寸都独立开发一个页面的话，这样的开发成本将会变得非常高，响应式布局就成了解决这一问题的有效途径。当然，深层次的响应式布局应该是贯穿前端和服务端的。
android表格布局怎么固定宽度 android:layout_width="100dp"
这样的话还是用线性吧，
然后把它们的权重设为同一
个值，还有就是要会灵
活使用而已巢状
bootstrap设定了响应式布局，怎么占满宽度
您好，这样：最好在他既有机制上 进行改动,不要打破他的设计理念,我觉得是最好不过的了.
比如你可以更改他的栅格数 或栅格宽度，
但是要注意各个装置不同解析度下的效果了。
左边{
width: 240px;
position: absolute;
*position: relative;
float: left;
margin: 0;
}
右边{
margin-left: 240px;
position: relative;
}
5响应式布局怎么写
自己写肯定累的半死，还会出现层出不穷的BUG，因为除PC外各种移动装置非常难搞，因此建议你直接使用 【Bootstrap】框架，这也是大部分前端开发者的首选解决办法，如果你是大公司要开发自己的框架，也可以参考。毕竟这是国际层面上应用最为广泛的响应式框架。各种中文资料文件齐备。
不用bootstrap怎么做响应式布局
禁止响应式布局有如下几步：
移除 此 CSS 文件中提到的设定浏览器视口（viewport）的标签：《meta》。
通过为 .container 类设定一个 width 值从而覆盖框架的预设 width 设定，例如 width: 970px !important; 。请确保这些设定全部放在预设的 Bootstrap CSS 档案的后面。注意，如果你把它放到媒体查询中，也可以略去!important 。
如果使用了导航条，需要移除所有导航条的摺叠和展开行为。
对于栅格布局，额外增加 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。 不要担心，针对超小萤幕装置的栅格系统能够在所有解析度的环境下展开。
针对 IE8 仍然需要额外引入 Respond.js 档案（由于仍然利用了浏览器对媒体查询（media query）的支援，因此还需要做处理）。这样就禁用了 Bootstrap 对移动装置的响应式支援。
HTML5中响应式布局怎么弄
步骤1 建立空白的HTML 5模版
首先，我们建立一个空白的模版，程式码很简单，如下所示：
复制程式码
步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。程式码如下所示：
复制程式码
读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全域性CSS样式调整用的 步骤3 往HTML 5标签中增加程式码
1）首先往标题中增加如下程式码：
Simple HTML5 Template
复制程式码
2）往导航标签中新增如下程式码，这样很方便地构件了一个简单的页面分类导航：
Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact
复制程式码
3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下程式码所示：
This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the
1500s
复制程式码
4）新增标签 HTML5提供的元素标签用来表示当前页面或文章的附属资讯部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
根据目前的规范，元素有两种使用方法：
被包含在中作为主要内容的附属资讯部分，其中的内容可以是与当前文章有关的引用、词汇列表等。
改成响应式布局，支援手机
推荐你使用bootstrap这个自适应框架，引入bootstrapCSS档案，直接呼叫已经写好的class，就能实现自适应，详情参考ranyouranqiguolu.的网页原始码！
中table列怎么固定宽度
不要使用百分比，就可以 如果不使用css style，就是width=150(以此类推)，
响应式布局
1024

四十二、移动端web开发之响应式布局

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
设备的划分情况：

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小， 再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
父容器版心的尺寸划分

但是我们也可以根据实际情况自己定义划分

bootstrap来自Twitter（推特），是目前最受欢迎的前端框架。bootstrap是基于HTML、CSS和JavaScript的，它简洁灵活，使得web开发更加快捷。
中文网 官网 推荐网站
框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

在现阶段，我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。
Bootstrap使用四步曲：

bootstrap需要为页面内容和栅格系统包裹一个 .container 或者 .container-fluid 容器，它提供了两个作此用处的类。

.container

.container-fluid

栅格嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成 若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

演示效果

前端几种常见的布局方式

1.静态布局（固定宽高）

2.弹性布局（flex）————常用

3.圣杯布局

flex：flex-group、flex-shrink、flex-basis

flex：auto/none/负数/一个长度或百分比/两个非负数/一个非负数和一个长度或百分比等

A，flex-group：当父元素有剩余空间时，子元素占据剩余空间的量

B，flex-shrink：当父元素的空间不足以展示所有的子元素，父元素没设置flex-wrap，子元素需要进行收缩的量

C，flex-basis：表示该子元素的初始宽度

4.自适应布局（为不同的屏幕分辨率定义的布局 @media媒体查询技术）

5.流式布局：（宽高用百分比，按屏幕分辨率调整，布局不发生变化）

6.响应式布局（使用meta标签，宽高随窗口调整自动适配，适应布局和流式布局的综合方式）

7.栅格布局

1）.栅格(网格划分)：在一个特定区域内划分出有规律的格子，依靠这些格子进行有规律的版面布局。

使用栅格布局：bootstrap（12列），element（24栏），antDesign

2）.栅格布局

container：栅格系统容器；rows：行；cols：列；gutters：各列间的空隙

3）.栅格布局实现响应式布局

8.table布局（使用表格进行页面排版和样式设置）

1）.用法

      display:table

      display:table-cell，相当于td元素

      display:table-row，相当于tr元素

      table-layout:fixed | auto(默认)：table-layout 属性用于显示表格单元格、行、列；auto, 自动表格布局，列的宽度由单元格中最大内容的宽度决        定；fixed ,固定表格布局。

响应式布局的核心技术是什么

响应式布局的核心技术是什么

但是，响应式布局，难点并非是技术方面，而是设计。
对于响应式布局的技术基础，只要你在MDN之类的网站上，把HTML5、CSS3的特性吃透，基本上完全能满足开发响应式布局的工作。
但是，技术过关了只是第一步，真正困难的是UED，如何设计站点、如何布局页面，这需要很多实际工作的积淀跟探索，不是简单的技术教程能补足的。此外还需要一定的“艺术细胞”，才能设计出好看、合理、方便的页面。
这方面的提高对于一个人来说可能需要数个月乃至数年的时间。
你可以去多看看那些响应式设计的站点，分析技术细节和设计思路。
多看看UED部落格，看看别人的经验。
用bootstrap v3这样符合响应式设计的前端框架做几个小样，总结分析。

苹果的核心技术是什么

ios+产品设计理念~
硬体都是别人的~

核电站的核心技术是什么?

核电站的核心技术从常规的意义上讲分几块：
核电站的研发技术，包括重要机理性试验、重要装置的研发和制造技术；
核电站的设计技术，从概念到图纸；
电站的施工设计及建造技术；
核电站的安全可靠执行技术；
退役及相关配套技术的掌握。
以上这些都是核心技术。

j2ee的核心技术是什么、？

封装
继承
多型
框架

通宝街的核心技术是什么？

通宝街的核心技术的大资料排名，回答希望你采纳！

TAC溯源链的核心技术是什么？

经过一段时间的磨练，TAC溯源链目前拥有了俩大技术结构；一是编码国际化，还有一个技术特点就是跨链。实际上，根据溯源目前的整体情况来讲，它和不同领域企业的合作成就了它的区块链模式应用更加的贴近市场需求。

斯巴鲁的核心技术是什么？

斯巴鲁汽车在中国的两大立足核心技术是：水平对置发动机（SUBARU BOXER）和左右对称全时四轮驱动系统（Symmetrical AWD）。
拓展：
水平对置发动机：
斯巴鲁的水平对置发动机（SUBARU BOXER）诞生于1966年。这种发动机的特点在于汽缸水平对向排列，执行时活塞相对运动，在输出充沛动力的同时有效地减轻了振动，而且水平对置发动机的结构更紧凑、重量更轻，可以通过装在车内更低位置而降低车辆整体重心。斯巴鲁首款配备水平对置发动机的车型——SUBARU 1000在同年甫一上市，便凭借前所未有的卓越行驶稳定性成为了引领新时代的先驱者。
左右对称全时四轮驱动系统：
斯巴鲁受自然界广泛存在的对称结构的启发，在1972年研发出了左右对称全时四轮驱动系统（Symmetrical AWD），并确信这一实现了完美平衡的系统是能够最大限度保证车辆精准操控和行驶稳定性的理想动力传动系统。同年，斯巴鲁将这一传动系统应用于释出上市的SUBARU Leone 4WD* Estate van车型，成功实现了左右对称全时四驱轿车的量产化。

乐学1号的核心技术是什么？

乐学1号轻学习智慧台灯，将LED台灯，数字钟，计时器和MP3音箱等几项实用功能有机的结合在一起，并通过“智控芯”整合控制技术将功能有机的集合在一起，可互动协同控制，让学生计划中学习，细节中养成，成为轻松调节，自主学习的主人。

微喷灌的核心技术是什么?

控制系统，和感应系统吧，参考：:afim.irrigation../ 全球滴灌技术发明者和领导者——以色列耐特菲姆(NETAFIM)

inter采用的核心技术是什么

从物联网的定义及各类技术所起的作用来看，物联网的关键核心技术应该是无线感测器网路(WSN)技术，主要原因是：WSN技术贯穿物联网的全部三个层次，是其它层面技术的整合应用，对物联网的发展有提纲挈领的作用。WSN技术的发展，能为其它层面的技术提供更明确的方向。
以下是实现物联网的五大核心技术：
核心技术之感知层：感测器技术、射频识别技术、二维码技术、微机电系统和GPS技术
1.感测器技术
感测技术同计算机技术与通讯技术一起被称为资讯科技的三大技术。从仿生学观点，如果把计算机看成处理和识别资讯的“大脑”，把通讯系统看成传递资讯的“神经系统”的话，那么感测器就是“感觉器官”。微型无线感测技术以及以此元件的感测网是物联网感知层的重要技术手段。
2.射频识别(RFID)技术
射频识别(Radio Frequency
Identification，简称RFID)是通过无线电讯号识别特定目标并读写相关资料的无线通讯技术。在国内，RFID已经在身份证、电子收费系统和物流管理等领域有了广泛应用。
RFID技术市场应用成熟，标签成本低廉，但RFID一般不具备资料采集功能，多用来进行物品的甄别和属性的储存，且在金属和液体环境下应用受限，RFID技术属于物联网的资讯采集层技术。
3.微机电系统(MEMS)
微机电系统是指利用大规模积体电路制造工艺，经过微米级加工，得到的集微型感测器、执行器以及讯号处理和控制电路、介面电路、通讯和电源于一体的微型机电系统。MEMS技术属于物联网的资讯采集层技术。
4.GPS技术
GPS技术又称为全球定位系统，是具有海、陆、空全方位实时三维导航与定位能力的新一代卫星导航与定位系统。GPS作为移动感知技术，是物联网延伸到移动物体采集移动物体资讯的重要技术，更是物流智慧化、智慧交通的重要技术。
核心技术之资讯汇聚层：感测网自组网技术、区域网技术及广域网技术
1.无线感测器网路(WSN)技术
无线感测器网路(Wireless Sensor
Neork，简称WSN)的基本功能是将一系列空间分散的感测器单元通过自组织的无线网路进行连线，从而将各自采集的资料通过无线网路进行传输汇总，以实现对空间分散范围内的物理或环境状况的协作监控，并根据这些资讯进行相应的分析和处理。
WSN技术贯穿物联网的三个层面，是结合了计算、通讯、感测器三项技术的一门新兴技术，具有较大范围、低成本、高密度、灵活布设、实时采集、全天候工作的优势，且对物联网其他产业具有显著带动作用。
2.Wi-Fi
Wi-Fi(Wireless Fidelity，无线保真技术)是一种基于接入点(Aess
Point)的无线网路结构，目前已有一定规模的布设，在部分应用中与感测器相结合。Wi-Fi技术属于物联网的资讯汇总层技术。
3.GPRS
GPRS(General Packet Radio
Service，通用分组无线服务)是一种基于GSM行动通讯网路的资料服务技术。GPRS技术可以充分利用现有GSM网路，目前在很多领域有广泛应用，在物联网领域也有部分应用。GPRS技术属于物联网的资讯汇总层技术。
核心技术之传输层：通讯网、网际网路、3G网路、GPRS网路、广电网路、NGB
1.通讯网
通讯网是一种使用交换装置、传输装置，将地理上分散使用者终端装置互连起来实现通讯和资讯交换的系统。通讯最基本的形式是在点与点之间建立通讯系统，但这不能称为通讯网，只有将许多的通讯系统(传输系统)通过交换系统按一定拓扑结构组合在一起才能称之为通讯。也就是说，有了交换系统才能使某一地区内任意两个终端使用者相互接续，才能组成通讯网。
2.3G网路
3G是英文the 3rd
Generation的缩写，指第三代移动通讯技术。相对第一代模拟制式手机(1G)和第二代GSM、CDMA等数字手机，第三代手机(3G)是指将无线通讯与国际网际网路等多媒体通讯结合的新一代移动通讯系统。
3.GPRS网路
这是一种基于GSM系统的无线分组交换技术，提供端到端的、广域的无线IP连线。通俗的讲，GPRS是一项高速资料处理的科技，方法是以“分组”的形式传送资料到使用者手上。虽然GPRS是作为现有GSM网路向第三代行动通讯演变的过渡技术，但是它在许多方面都具有显著的优势。
4.广电网路
广电网通常是各地有线电视网路公司(台)负责运营的，通过HFC(光纤+同轴电缆混合网)网向用户提供宽频服务及电视服务网路，宽频可通过CableModem连线到计算机，理论到户最高速率38M，实际速度要视网路情况而定。
5.NGB广域网路
中国下一代广播电视网(NGB)是以有线电视数字化和移动多媒体广播(CMMB)的成果为基础，以自主创新的“高效能频宽资讯网”核心技术为支撑，构建适合我国国情的、三网融合的、有线无线相结合的、全程全网的下一代广播电视网路。
核心技术之运营层：专家系统、云端计算、API介面、客户管理、GIS、ERP
1.企业资源计划(ERP)
ERP是指建立在资讯科技基础上，以系统化的管理思想，为企业决策层及员工提供决策执行手段的管理平台。ERP技术属于物联网的资讯处理层技术。
2.专家系统(Exper System)
专家系统是一个含有大量的某个领域专家水平的知识与经验，能够利用人类专家的知识和经验来处理该领域问题的智慧计算机程式系统。属于资讯处理层技术。
3.云端计算
云端计算概念间由Google提出的，这是一个美丽的网路应用模式，是指IT基础设施的交付和使用，通过网路以按需、易扩充套件的方式获得所需的资源。
核心技术之应用层：垂直行业应用、系统整合、资源打包
应用层主要是根据行业特点，借助网际网路技术手段，开发各类的行业应用解决方案，将物联网的优势与行业的生产经营、资讯化管理、组织排程结合起来，形成各类的物联网解决方案，构建智慧化的行业应用。
如交通行业，涉及的就是智慧交通技术;电力行业采用的是智慧电网技术;物流行业采用的智慧物流技术等。行业的应用还要更多涉及系统整合技术、资源打包技术等。

前端响应式是怎么回事

• 看看simplebs这个就明白了

• 响应式的核心优势在于设计者可以为所有设备使用同一种模板，只需要用CSS来定制内容在各种大小屏幕上的呈现方式。
  响应式网页的组成关键
  响应式页面的实现其实并不算困难，用到的也都是大家比较熟悉的一些技术。
  （1）Media Query
  Media Query的主要作用是根据不同的分辨率去调整一些不同的样式。由于目前主流的移动设备都基于ios和Android，这两者的自带浏览器都是webkit内核，因此我们可以使用viewport属性和Media Query技术实现响应式网页。通过这一方法，我们能实现让基准字号font-size在不同分辨率下显示不一样的内容。
  （2）Fluid grid
  Fluid grid也称流体布局，就是在PC端实现的基础上将一些元素的狂傲由固定调整为弹性制的百分比或是字体比例等。使用Fluid grid的网站能够根据屏幕宽度自动调整页面中每列的宽度，从而保证页面始终处于完整展现的状态，并且实现原有的基本功能。
  （3）Flex box
  Flex box是CSS3新添加的一种模型属性，它的出现有力的打破了我们常常使用的浮动布局、实现垂直等高、水平均分、按比例划分，可以实现许多我们之前做不到的自适应布局。如果你希望网站能以webapp的外观呈现在手机用户面前，那么，Flex box就是个不错的方式。Flex box和APP的结构很类似，头部底部全部固定，而中间部分的高度实现自适应。
  另外，与传统的web开发相比，由于响应式设计的页面布局、内容尺寸都发生了一些变化，所以，最终的成品极有可能与设计稿出入较大，还需前端开发人员和设计师多沟通，以免造成不必要的时间浪费。
  响应式web设计的优化
  在响应式网页的设计过程中，其中也会涉及到一些用户体验方面的问题和弊端，需要进一步的优化。
  (1)减轻Javascript库负载
  对于移动端来说，jQuery表现的太过厚重，而现在针对移动端的状态来说，有jQuery Mobile、YUI、XUI等可供选择的框架。
  （2）减少HTTP请求次数
  移动端相比较PC端有一个特殊的限制需要考虑到，就是用户的网络流量是有限的。这时候针对这些页面内部的部分操作，可以使用Ajax异步请求来完成，针对短期内不会变化的一些数据，可以使用服务器端缓存、前端缓存等机制来保存这些数据，这样可以减少用户一定的数据请求量。
  （3）Javascript和CSS需要尽量压缩
  把页面中使用的Javascript和CSS进行压缩之后会有效地减少页面大小。
  （4）用CDN管理页面资源
  CDN的即内容分发网络，意在尽可能避开互联网上有可能影响数据传输速度和稳定性的环节，使内容传输的更稳定。
  （5）列表图片实现“懒”加载
  移动终端设备因为屏幕大小有限，没有必要将全屏中的图片一次性加载完成，网页加载的同时，我们可以选择逐个加载，当用户进行滑动页面的时候，再继续加载图片。
  （6）图片显示的优化处理
  根据用户设备的分辨率来加载不同分辨率下的不同图片，这样既能给不同终端的用户一个很好的视觉体验，又不会白白浪费用户的网络数据流量。

Web前端面试题：响应式布局有哪些优点和缺点

响应式网页设计

优点：

• 跨平台和终端且不需要分配子域。

• 兼容当前及未来设备。

• 节约成本。一个域名，一套网页。

缺点：

• 兼容性 不兼容低版本浏览器。

• 移动带宽增多。

• 加载事件长、无用代码太多。

• 内存大。
  

前端布局的几种方式

1.固定布局，静态布局

传统Web设计，网页上的所有元素的尺寸一律使用px作为单位，网页宽度一般为960px。网页布局始终按照最初写代码时的布局来显示，不受浏览器影响。如果浏览器宽度如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景

2.流式布局

流式布局使用的是百分比，这位网页提供了很强的可塑性和流动性，与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。屏幕分辨率变化时，页面里元素的大小会变化而但布局不变，这可能导致如果屏幕太大或者太小都会导致元素无法正常显示。

3.自适应布局

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式，例如宽度960px是一种样式，网页宽度1440px是另一种样式。改变屏幕分辨率可以切换不同的静态局部，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。

4.弹性布局

使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。这种布局中包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位。默认的文字大小16px就是1em。

5.响应式布局

每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变，设计方法通常采用了媒体查询+流式布局，使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。为不同终端的用户提供更加舒适的界面和更好的用户体验。