viewport 布局百分比

在head里面加上一段话，如：

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

解释：宽度按照设备的宽度来，初始比例为1比1的比例，最小比例是1比1，最大比例也是1比1，能不能让用户去放大，不能。

width：控制viewport的大小，可以指定一个数值或者一个特殊的值，如：device-width是设备的宽度，（单位为缩放100%的css像素）。

 initial-scale：初始缩放，就是页面开始缩放的程度，是一个浮点数，

           例如：initial-scale=1.0  ，页面开始的时候就是1：1比例；

maximum-scale=1.0    minimum-scale=1.0   最大缩放和最小缩放，允许放大或缩小多少倍。

user-scalable=no：是否允许用户调整页面，如果为yes，用户可以改变，如果为no，用户不能缩放。maximum-scale=1.0    minimum-scale=1.0 会失效。

响应式布局

    百分比布局

        布局百分比 (用百分比之后，无论屏幕怎么缩放，都按照其的百分比来缩放。)

                width  ，padding-left,  padding-right，margin-left ，  margin-right， left  right

需要牢记的公式

    目标元素的宽度  /  父级元素的宽度  =  百分比宽度

温馨提示：高度的增加或者减少需要配合媒体查询

高度： height，padding-top,  padding-bottom，margin-top，  margin-bottom，top ,bottom

media screen and () {}

div{

width:80%;

height:300px;

background: red;

padding-left:10%;

margin: 0 auto 0 ;

}

@media screen and (max-width: 900px;){

div{

height:400px;

}

}

        图片百分比

例如： img{

width:100%;

}宽度设置了百分比，根据宽度等比的缩放自己的高度。

图片的高度和宽度比较弹性化，图片如果不设置宽度高度，会原始显示，当设置图片的宽度百分比时，宽度发生变化，高度也会等比缩放。

温馨提示，图片有时候太大，会超出，最好设置一个上限值， max-width或 max-height。

详情请见项目2018-myself中的tupian.html.

        文字百分比

div{

font-size: 30px;

color:red;

}

span{

font-size: 2em;

color: yellow;

}   

em 和 rem：em是父级的文字大小的倍数，父级大小是多少，决定子集em的大小。

                   rem就是针对html文字字体大小

一般响应式布局都用rem，通过改变html的文字大小，就可以整体改变所有页面中的文字大小。

偷懒的方式响应式布局：详情请见项目2018-myself中的toulan.html.

<meta  name="viewport" content="width=640 user-scalable=no,target-densitydpi=device-dpi">

width取值与页面定义的宽度一致，目前的最佳实践，缺点Android2.3.5以下的版本不支持，目前市面上已经没有这种版本了。