今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

一、布局方式有如下几种：

1.  固定布局：固定布局以PX(像素)作为单位的，在PC端，设计稿多少PX就写多少PX

但是这样设计有如下缺点：

（1）页面很死板，在更大的屏幕上，页面左右2边留白。

（2）不适应响应性布局。

2.  流式布局：流式布局是以百分比作为单位的，我们要牢记如下公式：

百分比宽度 = 目标元素宽度 / 上下文元素宽度

这种布局优点：可以自适应布局，根据不同的分辨率显示不同的宽度。

缺点：在行高或者marginTop在大屏幕下看起来太高，在小屏幕下看起来太窄。

3.  弹性布局：弹性布局是以em作为单位的，同样弹性布局也支持如下公式：

百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸

使用em将文字像素px转换为相对单位，

二、媒体查询：

根据特定的环境查询各种属性值，比如设备的宽度，是否横向使用不同的css样式来渲染。

媒体查询使用如下：比如内联样式可以如下写：

1. 最大宽度960px一种布局：

 @media screen and (max-width:960px) {<=960}

2. 最小宽度600px 另一种布局：

@media screen and (min-width:600px) {>=600}

3. 宽度在600px 到 960px之间，如下:

@media screen (min-width:600px) and (max-width:960px) {600<=x<=900}

理解meta各个属性的含义：

做h5页面移动端开发需要在head标签内引入下面这句话。（如果没有引入的话，页面的字体等大小就不正常了）。

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

具体含义如下：

Width: 控制viewport的大小。如device-width为设备的宽度。

initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。

maximum-scale 允许用户缩放到的最大比例，范围从0到10.0

minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0

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

综合：流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。

但是针对响应性web布局使用媒体查询也有缺点的,缺点如下：

要针对不同的屏幕大小设计不同的设计。对于前端对于不同的屏幕要写不同的样式，增加了工作量，同时维护起来不是很方便(要维护几份不同的css)。

三、图片

1. 对于背景图片来说，css3有个属性 background-size可以等比例缩放背景图片。

但是对于小屏幕的移动设备去加载大背景图片的话，有缺点的，最主要的缺点是要更大的带宽，浪费流量。所以我们要想做的更好的话，可以使用媒体查询根据设备的宽度来渲染不同大小的背景图片。

2. 对于页面上的<img/>标签图片的话：

（1） 如果只是页面上静态图片的话，不考虑带宽的情况下，可以使用width=100%”

（2）如果是商品图或者页面上有多个的话，考虑不浪费不必要的带宽，需要后台根据不同的设备宽度大小来返回不同的json数据的图片来给我们前端，之后我们前端使用JS动态的渲染出来。

img { max-width:100%; }

含义是：确保图片的最大宽度不会超过浏览器的窗口或其容器可视部分的宽度，所以当窗口或容器的可视部分变窄时，图片的最大宽度值也会相应的变小，图片本身永远不会覆盖容器。

明天计划的事情：（一定要写非常细致的内容） 

完成响应式的设计

了解栅格系统

遇到的问题：（遇到什么困难，怎么解决的） 

暂无
收获：（通过今天的学习，学到了什么知识）

同今天完成的事情