响应式布局

响应式布局 自适应布局

1. 响应式布局：响应式布局等于流动网格布局，需要考虑上百种状态。
2. 自适应布局：自适应布局等于使用固定分割点来进行布局。只需考虑几种不同状态。
3. 响应式布局概念：意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局设计步骤

1.在标签里设置meta标签（移动端）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

注：（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 ）

2.通过媒体查询来设置样式 Media Queries

• Media Queries 是响应式设计的核心。
• 它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

• 兼容 iPad 和 iphone 的视图，那么可以这样设置：

/** iPad **/

@media only screen and (min-width: 768px) and (max-width: 1024px) {}

/** iPhone **/

@media only screen and (min-width: 320px) and (max-width: 767px) {}

• 处理图片缩放的方法

img { width: auto; max-width: 100%; }

注：更有效率的做法是，将多个media queries整合在一个样式表(css)文件中

@media 媒体查询关键字

    and 条件连接符：且
    or 或
    not 非

单位

    绝对单位：尺寸固定不变的单位：px cm m
    相对单位：大小有参考元素决定：一般都是相对父元素
        百分比 相对父元素
        em  需要先设置font-size 它的值：为参考单位
            默认1em=16px 
            如果有font-size那么：其它属性中的1em=font-size的值
            通常用于设置文字大小：参照物：font-size
        vw  视图窗口宽度 
            100vw=视图窗口宽度
        vh  视图窗口高度
            100vh=视图窗口高度
            注意尽量不要使用
        rem 根元素html 1rem=16px 由html的font-size大小决定
        rpx 微信小程序