今天完成的事情：

自适应布局（Adaptive Layout）

自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。 

你可以把自适应布局看作是静态布局的一个系列。 

就是说你看到的页面，里面元素的位置会变化而大小不会变化；

4、流式布局（Liquid Layout）

流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 

。 

你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

5、响应式布局（Responsive Layout）

做手机网站必加的一句头部(head)代码

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

name="viewport"   名称=视图

width=device-width 页面宽度=设备宽度(可以理解为获取你手机的屏幕宽度)

initial-scale - 初始的缩放比例  

minimum-scale - 允许用户缩放到的最小比例   

maximum-scale - 允许用户缩放到的最大比例  

user-scalable - 用户是否可以手动缩放  

分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 

可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 

每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

二 响应式布局步骤

1.布局及设置meta标签

当创建一个响应式网站，或者非响应式网站变成响应式的时候，首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局，页面固定宽度大小，我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询（Media Query)和响应式代码。这种操作更容易实现响应式特性。

当你完成当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到和标签之间。这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。

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

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="HandheldFriendly" content="true">

user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题

明天计划的事情：

完成任务13

遇到的问题：

scss的有的时候很繁琐，我通常都是在最开始把一开始需要的变量和用的@mixin 给弄好，最后开始使用，我感觉有时候就有点麻烦了。

收获：

响应式设计需要注意的问题

1.宽度不固定，可以使用百分比

#head{width:100%;}

#content{width:50%;}

2.图片处理

在这里我给大家一把钥匙,有人会说，博主，能不能别装逼？图片处理还有啥钥匙，你以为是开门啊，博主，醒醒吧

哎哟 ，我这暴脾气，我说的钥匙不是真的钥匙，而是指图片处理的万能方法，是什么呢？就是图片液态化。接着 会有人问：“什么是图片液态化”呢？这个问题问的很好，给你打99分，多给你一分怕你骄傲，大家都知道水无形 能适合很多容器，那么假如我们把图片当做水 是不是就可以实现图片自适应问题了呢？

在html页面中的图片，比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的最大宽度，如：

#wrap img{

    max-width:100%;

    height:auto;

}

如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。

除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：

#log a{display:block;

        width:100%;

        height:40px;

        text-indent:55rem;

        background-img:url(logo.png);

        background-repeat:no-repeat;

        background-size:100% 100%;

        }

background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值，那么另一个值默认为auto。

background-size:cover; 等比扩展图片来填满元素

background-size:contain; 等比缩小图片来适应元素的尺寸

最后我们来总结下响应式布局的实现原理 

首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体） 

1.响应式布局 

1.Meta标签定义 

2.使用Media Queries适配对应样式 

2.响应式内容 

1.响应式图片

2、自适应布局（Adaptive Layout）

自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。 

你可以把自适应布局看作是静态布局的一个系列。 

就是说你看到的页面，里面元素的位置会变化而大小不会变化；

3、流式布局（Liquid Layout）

流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 

。 

你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

4、响应式布局（Responsive Layout）

分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 

可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 

每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。