web响应式理解

19寸显示器：1440x900(16:10)

20寸显示器：1600x900(16:9)1600x1200(4:3)

21.5寸显示器：1920x1080(16:9)

22寸显示器：1680x1050(16:10)1920x1080(16:9)1920x1200(16:10)

23寸显示器：1920x1080(16:9)1920x1200(16:10)

23.6寸显示器：1920x1080(16:9)

24寸显示器：1920x1200(16:10)1920x1080(16:9)

25寸显示器：1920x1080(16:9)

26寸显示器：1920x1200(16:10)

27寸显示器：2560x1440(16:9)

30寸显示器：2560x1600(16:10)
复制代码

1、响应式布局

响应式布局是什么？

• 【目标】响应式设计的目标是确保一个页面在全部终端上（各类尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出使人满意的效果。
• 【技术】对CSS编写者而言，在实现上不拘泥于具体手法，但一般是糅合了流式布局+弹性布局，再搭配媒体查询技术使用
• 分别为不一样的屏幕分辨率定义布局，同时，在每一个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：建立多个流体式布局，分别对应一个屏幕分辨率范围。能够把响应式布局看做是流式布局和自适应布局设计理念的融合。

响应式布局特色

每一个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

响应式设计方法

设计方法：媒体查询+流式布局。

• 一般使用 @media 媒体查询
• 和网格系统 (Grid System)
• 配合相对布局单位进行布局，
• 实际上就是综合响应式、流动等上述技术经过 CSS给单一网页不一样设备返回不一样样式的技术统称。

响应式设计优缺点

• 【优势】：适应pc和移动端，若是足够耐心，效果完美
• 【缺点】
  • （1）媒体查询是有限的，也就是能够枚举出来的，只能适应主流的宽高。
  • （2）要匹配足够多的屏幕大小，工做量不小，设计也须要多个版本。

代码举例

响应式页面在头部会加上这一段代码：

<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">
复制代码

2、流式布局

流式布局是什么？

• 流式布局（Liquid）的特色（也叫"Fluid")
• 是页面元素的宽度按照屏幕分辨率进行适配调整，但总体布局不变。
• 【表明做】栅栏系统（网格系统）。
• 【具体体现】网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也做相似处理（width:100%, max-width通常设定为图片自己的尺寸，防止被拉伸而失真）。

流式布局特色

布局特色：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就致使若是屏幕太大或者过小都会致使元素没法正常显示】

流式布局设计方法

使用%百分比定义宽度，高度大都是用px来固定住，能够根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽量的适应各类分辨率。每每配合 max-width/min-width等属性控制尺寸流动范围以避免过大或者太小影响阅读。

流式布局缺点

这种布局方式在Web前端开发的早期历史上，用来应对不一样尺寸的PC屏幕（那时屏幕尺寸的差别不会太大），在当今的移动端开发也是经常使用布局方式

• 问题：若是屏幕尺度跨度太大，那么在相对其原始设计而言太小或过大的屏幕上不能正常显示。
• 缘由：由于宽度使用%百分比定义，可是高度和文字大小等大都是用px来固定，因此在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，可是高度、文字大小仍是和原来同样（即，这些东西没法变得“流式”），显示很是不协调。

3、自适应布局

自适应布局是什么？

自适应布局的特色是分别为不一样的屏幕分辨率定义布局，即建立多个静态布局，每一个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率能够切换不一样的静态局部（页面元素位置发生改变），但在每一个静态布局中，页面元素不随窗口大小的调整发生变化。能够把自适应布局看做是静态布局的一个系列。

自适应布局特色

一、布局特色：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化

自适应布局设计方法

二、设计方法：使用 @media 媒体查询给不一样尺寸和介质的设备切换不一样的样式。在优秀的响应范围设计下能够给适配范围内的设备最好的体验，在同一个设备下实际仍是固定的布局。

自适应布局优缺点