关于页面自适应的问题

关于页面自适应的问题
1.Static
静态布局就是传统的网站形式：对于PC设计一个居中布局，窗口缩小时，内容被遮挡，呈现横竖向滚动条。对于移动设备，单独建立一个m.域名及相应的移动网站。
2.Adaptive
自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。
3.Responsive
响应式布局（Responsive）的特点是分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
4.Liquid
流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

媒体查询使用方法@media

Media Queries能在不同的条件下使用不同的样式，使其在终端展现不同的渲染效果。

@media 媒体类型and媒体特性

媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指的值，两部分用冒号隔开(max-width: 480px)
但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

• 最大宽度max-width
• 最小宽度min-width
• 多个媒体特性使用，使用关键词"and"将多个媒体特性结合在一起
• 设备屏幕的输出宽度Device Width，根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）
• not关键词，使用关键词“not”是用来排除某种制定的媒体类型
• only关键词，only用来指定某种特定的媒体类型

Viewport 基础

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放