今天完成的事情

任务十三首页，结果页修复限制宽度后出现的bug

学习css样式分离，css架构

设置项目的基础CSS重置和基础样式

明天计划的事情

完成任务13

遇到的问题：

宽度放大后，顶部靠左，

解决办法：删除定位中left

深度思考

task13-3.移动端有哪些常见布局方式？

一种是响应式布局，利用@meida判断各个size；第二种是REM；然后是设置viewport中的width。

另外还有百分比流式布局，rem布局占据了目前移动端布局的热潮，除此之外还有响应式布局，固定宽度布局等。

百分比流式布局

这里面最知名的当属bootstrap框架的思路，他所有的组件以及模板ui均是百分比流式布局，单位为px.并且我们看到的大部分对移动端适配的页面也均是采用这种核心思想去做的，方法简单，多端共用，可以针对不同临界值做额外处理。比如百度，天猫，知乎，京东，微信一些文章等。所以无论怎么看，百分比流式布局都是一种常规+主流的布局方案。

核心原则：文字为流式布局，宽度100%按照屏幕宽度缩放，高度固定px，水平采用百分比，或者固宽+变宽，图片固定大小或者百分比缩放，辅助flex布局 。有使用的最大媒体查询临界值（一般为640）。 通过下图去理解下： 百分比布局效果图

缺点：在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点

REM 方式布局

REM 是一种相对单位，它依据的是“根”节点的字体 (font-size) 的大小。

REM 是目前移动端页面布局常用的方式，它可以使整个页面的所有元素都随着显示设备尺寸的变化而相应的调整自己的尺寸，从而增强页面对设备适配的灵活性，这种变化我称之为“页面的缩放”。

既然REM会让页面根据不同的显示设备进行适配缩放，那么必然就会有一个 标准页面尺寸，就目前而言，整个前端开发界使用最多的标准页面尺寸则是根据iphone4或者 iPhone5为依据的 640px*1366px ,也有以iphone6为基准的750px。这个标准的页面尺寸，我们可以将其定义为1,如果当前的显示设备尺寸小于标准页面尺寸（640px或者750px）那么便让页面尺寸缩小，使其小于1。而当显示设备尺寸大于标准页面尺寸，我们即可以做一些其它的适配，也可以将页面整个居中显示在显示设备中然后不进行任何缩放操作。

通过上述，我们可以知道两个关键点，一是页面的缩放，这个我们等下会说到，二就是采用rem为单位进行页面布局，实际上rem布局与px布局并没有什么本质的区别，这个我们可以代入实例去理解，比如现在 html 的 font-size的大小是100px，即 1rem = 100px,如果现在页面中要放入一个200*200的盒子，那么按照等比关系，即：

div{
width:2rem;
height:2rem;
background:gray;
}

除了将rem与px结合起来进行理解rem布局的原理，淘宝的前端工程师也提出了另一种理解方式，这种方式的优点在于可以向后与 vw/vh 进行兼容理解，首先将页面划分为100分，每一份的宽度为(n)px,设定1rem = 10n,如果基准页面是640px的话，那么每份即6.4px 而 1rem = 64px。如果现在有一个 200px * 200px 的盒子，那么按照rem与px的等比关系，即：

div{
width:3.125rem;
height:3.125rem;
background:gray;
}

最后我们谈谈 REM 实现的页面缩放适配原理， rem 是依据 html标记的 font-size 大小的相对单位，对于使用rem为单位的页面，在被载入到显示设备显示的时候，会根据显示设备的尺寸，然后对应的修改html标签的font-size值，这样便可以一处修改，整个页面内容都会发生改变，即实现根据设备尺寸进行缩放的效果。

REM方式进行移动端布局的原理都是相同的，但是不同的在与对于设备尺寸的检测上，就目前而言分为两种，一种是通过CSS meida查询，另一种则是通过JS检测。

响应式布局

响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样反而可以节约成本，不用再专门为自己的网站做一个web app的版本。

@media (max-width:768px){
//css
}

备注 ：响应式布局还可以根据设备宽度选择按需加载不同情况下的样式，可以加在样式link标签中。

<link rel="stylesheet" href="css/1.css" media="(max-width:500px)"/>

固定宽度布局

主体页面固定宽度，两边留白。

.main{
width:980px;
margin:0 atuo;
 }

设置viewport进行缩放 仅仅靠这个实现适配是远远不够的，页面载入的时候会有缩放的情况，所以尽量使用rem等常规布局方式去做布局比较好。 如果你想使用这个方案，可以使用以下代码实现，针对部分安卓不适配进行了一定的修正。（这种方式还是px为单位）

function changeViewport(){
// UI-width ：WebApp布局宽度
// device-width ：屏幕分辨率宽度
// target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160;
var uiWidth = 750,
deviceWidth = (window.orientation == 90 || window.orientation == -90) ? window.screen.height : window.screen.width;
devicePixelRatio = window.devicePixelRatio || 1;

var myScale = deviceWidth / uiWidth;
var targetDensitydpi = uiWidth / deviceWidth * devicePixelRatio * 160;
//alert(uiWidth+","+deviceWidth+","+devicePixelRatio+","+myScale+","+targetDensitydpi);
var viewportContent = "initial-scale=" + myScale + ", maximum-scale=" + myScale + ", minimum-scale=" + myScale + ',target-densitydpi=' + targetDensitydpi + ', width=device-width, user-scalable=no';
//var viewportContent = "initial-scale=" + myScale + ", maximum-scale=" + myScale + ", minimum-scale=" + myScale + ', width=device-width, user-scalable=no';
document.querySelector('meta[name=viewport]').attributes['content'].value = viewportContent;
}

window.addEventListener("orientationchange", function() {
// Announce the new orientation number
changeViewport();
}, false);
changeViewport();

媒体类型 @meida还可以根据媒体类型进行断点。