响应式布局

自适应布局 adaptive web design

自适应布局：一个应用程序使用多种版本用户界面，针对不同屏幕，服务器返回不同版本的用户界面，供用户访问。

响应式布局 response web design

响应式布局：一套应用程序用户界面能响应不同设备窗口或屏幕并且内容展示良好。

1. 设计方法: 媒体查询 + 流式布局
2. 优点：适应pc和移动端，如果足够耐心，效果完美
3. 缺点：匹配足够多的屏幕，工作量大，代码不好维护

自适应和响应式的一些区别

1. 自适应是多套用户界面，响应式是一套用户界面。
2. 自适应需要获取设备分辨率信息，然后请求服务器返回对应的版本界面。
3. 自适应在不同版本使用不同的适配方案。

响应式实现

设置视口 viewport

• width=device-width 指定视口为理想视口，以便使用当前视口（设备独立像素为单位）能展现良好的页面；
• initial-scale=1 指定将 CSS 像素与设备独立像素比例设为 1:1。

<meta name="viewport" content="width=device-width, initial-scale=1">

可以通过CSS@viewport方式声明，与meta标签效果相同：

@viewport {
  width: device-width;
  zoom: 1;   /* zoom属性等同于 viewport meta 标签的 initial-sacale 属性。 */
}

使用媒介查询适配样式

设置断点

• xs, extra-small: > 0
• sm, small: >= 600
• md, medium: >= 960
• lg, large: >= 1280
• xl, xlarge: >= 1920

.c1 {
  padding: 10px;
  width: 100%;
}

@media screen and (max-width: 600px) {
  .c1 {
    padding: 20px;
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 960px) {
  .c1 {
    padding: 40px;
    font-size: 2rem;
  }
}

响应式图片

弹性图片布局

图片的宽度自适应，不设置高度，高度根据图片分辨率比例自适应

.img-wrap {
  width: 100%
}

.img {
  max-width: 100%;
}

图片自适应

为不同屏幕尺寸提供不同的图片，大屏幕提供大尺寸图片，小屏幕提供小尺寸的清晰图片，高分辨率显示屏提供高分辨率图片(2x, 3x)

<img src="photo.png" srcset="photo@2x.png 2x" />

• srcset 属性增强了 img 元素的行为, 在不支持 srcset 的浏览器上, img src使用默认图片

屏幕

ui度量

1. pt 磅 印刷常用单位 绝对大小
2. px 像素 相对大小
3. em 相对父元素字体大小的缩放单位
4. rem 相对根元素字体大小的缩放单位
5. % 百分比 相对最近父元素的百分比
6. vw 相对屏幕宽度的百分比 屏幕宽度是100vw
7. vh 相对屏幕高度的百分比 屏幕高度是100vh

视口

1. 视觉视口

当前屏幕上页面的可见区域，即屏幕内文档的可见区域。

2. 布局视口

页面布局的视口，比视觉视口宽，包括可见和不可见区域。

3. 理想视口

设备的屏幕尺寸。如，iphone5理想视口为320，iphone6为375，IPhone7plus为414

• 在PC端，通常设备独立像素和CSS像素比例是1:1
• 在移动端，设备像素和css像素的比例不是1:1, 所以设置viewport为理想视口就能很好展示ui。

物理尺寸

屏幕物理尺寸, 指的是屏幕的对角线，单位为inch，如5.1寸，55寸

逻辑尺寸

屏幕宽高的尺寸，单位为pixel, 如1920*1080

物理像素 device pixel

设备像素，实际像素，是图像在屏幕上展示的的最小可控制元素

分辨率

设备物理像素的总和, 如：设备屏幕的宽是1024物理像素，高为768物理像素，则设备的像素总和是"1024*768"

像素密度 pixel density(dp)

每英寸拥有的物理像素的数量

pd = 屏幕宽度物理像素 ／ 屏幕宽度英寸