响应式布局

一、视口（viewport）

移动前端的viewport就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小。手机端和PC端视口存在差异，电脑端视口等于其分辨率，手机端的视口与分辨率无关，等于设备厂家所指定的宽度。

移动端基本视口分辨率设置为980px。

 

 

约束视口

<meta name="viewport" content="width=device-width,initial-scale=1.0,maxmum-scle=1.0,user-scalavle=0">

 

width=device-width 视口为设备宽度（就是人设置的一个宽度）//不设置的话默认为980px

initial-scale=1.0 初始化的视口大小是1.0倍

maximum-scale=1.0 最大的倍数是1.0倍

user-scalable=0 不允许缩放视口

 

这个视口的标签告诉浏览器怎么渲染网页。在这里，标签想表达的意思是：按照设备的宽度（device-width）来渲染网页内容。事实上，在支持这个标签的设备上给你看一看效果，你就明白了。

 

 

二、图片

img{

max-width:100%;

}

声明max-width规则，就是要保证所有图片最大显示为其自身的100%（即最大只可以显示为自身那么大）。此时，如果包含图片的元素（比如包含图片的body或div）比图片固有宽度小，图片会缩放占满最大可用空间。

 

 

 

三、流式布局

百分比布局也叫作流式布局、弹性盒布局。手机网页没有版心，都左右撑满。

百分比能够设置的属性是width、height、padding、margin。其他属性比如border、font-size不能用百分比设置的。

 

在指定一个元素的的值为百分比的时候，有以下规则

• 如果百分比写width，那么指的是父元素width的百分之多少。

• 如果用百分比写height，那么指的是父元素的height的百分之多少。

• 如果百分比写padding，那么指的是父元素width的百分之多少，无论是水平的padding还是竖直的padding

• 如果百分比写margin，那么指的是父元素的width的百分之多少，无论是水平方向的padding还是竖直方向的padding。

 

border不能用百分比来指定！

 

 

四，媒体查询

@media screen and(){

}

@media就表示媒体查询，查询现在看这个网页的设备是什么，以及它的宽度是多少。screen表示看这个网页的设备是显示器，而不是残疾人听力设备、也不是打印机。后面用and符号罗列所有的可能性。

 

 

五、rem响应式布局

rem响应式布局思想

1. 一般不要给元素设置具体的宽度，但是对于一些小图标就可以设定具体的宽度值。

2. 高度值可以设置固定值。

3. 所有设置的固定值都用rem做单位，（首先在HTML中设置一个基准值：PX和REM的对应比例,然后在效果图上获取PX值,布局的时候转化为REM值）

4. js获取真实屏幕的宽度，让其处于设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了。

 

如何做个rem响应式布局

1.拿到设计稿后在样式中给HTML设定一个font-size的值，一般都设置一个方便后面计算的值，例如100px

html{

font-size:100px；//1rem=100px

}

2.写页面，写样式

首先按照设计稿的尺寸来写样式，然后在写样式值的时候，需要把得到的像素值除以100计算出对应的rem的值

 

真实项目中外层盒子的宽度我们一般还是不写固定值，沿用流式布局法的思想，我们用百分比的方式布局

margin:0 0.2rem

height:3rem;

 

3.根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的font-size的值。

设计稿宽度为640px,其中有一个部分是轮播图，它的尺寸是600*300，在样式中给HTML设定一个font-size的值为100px,则轮播图大小应该为 6rem×3rem，那如果手机屏幕宽度为375px,其font-size应该设置为多少。

375/640*100->fontsize=58.59375//此时轮播图能自适应手机屏幕大小

 

根据当前屏幕宽度和设计稿宽度的比例，动态计算一下当前宽度下的fontsize值应该是多少，如果fontsize的值改变了，之前设定的所有REM单位的值自动会跟着放大或者缩小。

 

//html部分

<section id="main">

<div class="box"></div>

</section>

//js部分

<script>

function（）{

  var desW=640,

  winW=document.documentElement.clientwidth,

  ratio=winW/desW；

  var oMain=document.getElementById（“main“）;

  if(winW>desW){

  oMain.style.width=desW+"px";

  oMain.style.margin="0 auto";

  return;

}

document.documentElement.style.fontSize=ratio*100+'px';

}();

</script>

（未完待续）)