單莼de嗳

首先了解下什么是响应式布局

所谓的响应式布局就是在同一个页面下在不同的设备下有不同的布局。传统的开发方式就是电脑PC端开发一套CSS ,然后手机端在弄一套CSS，这样搞非常费时费力，如果在多几个端的设备，麻烦程度可想而知。而今天我们讨论的响应式布局只需要开发一套CSS即可。

第一种方案：使用CSS3 Media Query,rem，vw 这些新特性

我们可以使用rem来做字体的适配，用 srcset 属性来做图片的设置图片的响应式，宽度可以用rem，布局可以使用flex，栅格系统等来实现网站的响应式布局，然后配合使用Media Query 媒体查询。因此完成响应式布局你需要注意以下几点：

• 设置viewport
• 媒体查询
• 字体的适配（字体单位）
• 百分比布局
• 图片的适配（图片的响应式）
• 结合flex，grid，BFC，栅格系统等已经成型的方案

Media Query （媒体查询）

使用CSS3媒体查询的功能，可以让我们针对不同的屏幕分辨率（媒体类型）定义不同的样式，当我们随意放大缩小浏览器的窗口大小时，页面也会根据浏览器的宽度和高度选择对应范围的CSS样式。

移动布局优先还是PC布局优先

不管我们选择哪种方式优先 ，都是根据随着屏幕的变化，后面的样式会覆盖前面的样式，因此如果你选择移动优先的化，首选是min-width属性，PC端优先使用max-width。以下图片展示了移动优先布局的示例代码，仅供参考。

百分比布局

通过百分比布局，是我们想到最常用的布局方式，简单又容易理解。通过百分比单位，可以使得浏览器大小的变化其DOM元素内容也随着等比变化，从而实现响应式的效果。由于其子元素的宽高使用的百分比依赖于父元素的宽和高。这只是简单一方面，因为页面里不光有宽高百分比，还涉及到top、bottom、padding、margin、border-radius这些属性你要搞清楚这些是相对父元素还是相对自身的概念。这就意味着设计稿出来了，你要进行一些列的百分比运算，还要搞清楚这些百分比是相对于父元素还是自身，大大增加了问题的复杂性。

rem

REM是CSS3新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。为了方便大家理解，简单举个示例：如果我们每一层div都使用1.2rem，最内层就会是16px x 1.2 = 19.2px。(根元素指的是html的font-size，预设为16px )。如下图所示：

视口单位

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。

图片响应式

所谓的图片响应式，就是屏幕在不同的分辨率下显示不同对应尺寸的图片。一个通常的情况就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。

这是我提供的一个自行DIY的响应式方案，不需要借助第三方框架，但是你需要掌握我刚才提及的一些概念，学会灵活运用，但是有点需要强调的是你需要考虑到兼容性的问题，比如Flex弹性布局，Grid网格布局的兼容性，比如在ie低版本浏览器上不支持。

第二种方案：使用Columns栅格系统，借助第三方库比如Bootstrap

如果你觉得我上述说的那一大堆比较麻烦，你可以学习Bootstrap这个CSS框架，这个就需要你们的设计需要了解什么是栅格布局，做的产品设计需要严格按照栅格布局的思路进行设计。Bootstrap 目前是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。目前国外好多主流的网站都在使用Bootstrap。

小节

今天的分享就给大家介绍到这里，我们一起了解了使用两种方案实现响应式的布局，方案一你需要了解的新内容会更多些，还需要多实践。方案二，你只要学会 Bootstrap这个框架即可，同时设计还需要理解栅格布局这个概念，设计稿要符合栅格布局的思路。

前端达人

这样就只能做响应式布局了，不过不是以js 来主导，得用css 来主导，目前我了解到的有：

1. 媒体查询

CSS 媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

2.百分比布局

3. rem布局

当然还有其他方案，这个就有待各位大咖的发挥了，希望我的回复能帮到你

一个小DD

做一个网页，不仅只靠js，主要分为结构层，样式层，交互层。针对您所说，那就是需要响应式的网页了，响应式包括：页面窗口的大小，字体，图片等。需要在不同的窗口中让不同的浏览者感受同一样的效果与体验，窗口响应式需要视窗viewport 与css的媒体查询结合来实现，字体图片等需要rem与css媒体查询结合来实现。当然我说的都是用原生的写法，现在都有不同的框架可以实现你要的效果，像bootstrap 、vue等都是比较好的，希望能够帮到你。

清風破送

放大缩小不改变排版，这一般是指前端的响应式技术。

当然，响应式技术也有一定的界限范围的。如果将电脑端的网页，缩小放到手机端也不改变排版，这样出来的效果会很差。

响应式技术核心是通过媒体查询，实现一套设计，适配不同尺寸的屏幕。在尺寸的某个区间内，其排版不变，而超出区间，则排版发生改变。

如果确实希望怎样缩小放大排版均不会发生变化，直接使用百分比布局即可，不需要额外的技术，但用户体验肯定不够好。

前端面试题

PC端添加以下meta内容即可： .... 2. Mobile端添加以下meta内容即可： ..... 说明： target-densitydpi=device-dpi，指定屏幕像素密度DPI，device-dpi 为设备原本的DPI值，不会有任何缩放。

關鍵字: 响应 排版 科技