一、meta的使用
1、<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.0，且不允许用户点击屏幕放大浏览
2、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉： <meta name="msapplication-tap-highlight" content="no">
3、忽略页面的数字为电话，忽略email识别 <meta name="format-detection" content="telephone=no, email=no"/>
二、针对适配等比缩放的方法:
@media only screen and (min-width: 1024px){
body{zoom:3.2;} }
@media only screen and (min-width: 768px) and (max-width: 1023px) {
body{zoom:2.4;} }
@media only screen and (min-width: 640px) and (max-width: 767px) {
body{zoom:2;} }
@media only screen and (min-width: 540px) and (max-width: 639px) {
body{zoom:1.68;} }
@media only screen and (min-width: 480px) and (max-width: 539px) {
body{zoom:1.5;} }
@media only screen and (min-width: 414px) and (max-width: 479px) {
body{zoom:1.29;} }
@media only screen and (min-width: 400px) and (max-width: 413px) {
body{zoom:1.25;} }
@media only screen and (min-width: 375px) and (max-width: 413px) {
body{zoom:1.17;} }
@media only screen and (min-width: 360px) and (max-width:374px) {
body{zoom:1.125;} }
三、布局 1.布局使用百分比： 不同的手机有着不同的分辨率，这时再用我们pc端布局常用的px就不合适了。使用百分比布局要时时刻刻清楚其父元素，因为子元素的百分比高度是根据父元素的高度来确定的，当父元素的高度为不确定值时，或者说父元素的高度未定义时，子元素的高度百分比将没有用（没有参照物）。所以只有设置了父元素的高度，子元素的高度百分比才会有用。
2.em与rem： em是根据相对单位，不是固定的，他会继承父级元素的字体大小，若没有父级则em的相对基准点为浏览器的字体大小，浏览器的字体默认为16px，因此若无父级元素，相对于浏览器大小：Xem=X*16px; rem是css3新增属性，是完全相对于HTML根元素大小设定的，默认为10px，因此无论父级字体大小，1rem=10px。
3.栅格布局： box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局。
4、wap页面有img标签，记得加上display：block；属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置width:100%;而且不能添加高度。
5、有关Flexbox弹性盒子布局一些属性 1、不定宽高的水平垂直居中
xxx{ position:absolute; top:50%; left:50%; z-index:3; -webkit-transform:translate(-50%，-50%)； border-radius:6px; background:#fff; }
2、[flexbox版]不定宽高的水平垂直居中 .xx{ justify-content:center;//子元素水平居中， align-items:center;//子元素垂直居中; display:-webkit-flex; }
