手机端页面收获

1.   Head设置

<meta name="viewport"content="width=device-width,  initial-scale=0.5，minimum-scale=1.0,maximum-scale=1.0 ，user-scalable=0"/>
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

2.   字体单位：em

手机端最小适合字体大小18px；

em有如下特点：
　　1. em的值并不是固定的;
　　2. em会继承父级元素的字体大小。

设置：

1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10，然后换上em作为单位;

避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em

3.   宽度和高度设置

宽度，内、外边距用百分比，高度用px；

4.   浏览器默认

/*去掉input在ios下的默认效果*/

input{ resize: none; -webkit-appearance: none; }

5.   新学习知识：

（1）      背景图片拉伸铺满：

background: url(/Content/IMG/one-bg.jpg)center no-repeat;

background-size:100% auto;

-webkit-background-size:100% auto;

-moz-background-size: 100%auto;

-o-background-size: 100%auto;

height: auto;

width: 100%;

（2）      文本框value

<input type="text"class="" placeholder="请输入用户名" />