移动web开发基础知识

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

2、-webkit-tap-highlight-color: transparent; （透明）/*手指点击，默认高亮效果*/

     -webkit-appearance: none; /* 移动端 有一些 浏览器 会默认给 input标签 添加一些 特有的样式 比如 3d 高光效果  */

3、 /* 保证 内容的大小不变 */
box-sizing: content-box;
/* 保证盒子大小不变 内容可能会变 移动端 设置 所有的盒子 都是border-box 目的 保证 盒子大小不变 */
box-sizing: border-box;

基本样式：

/* 通用样式 */
*,
::before,
::after{
	font-size: 14px;

	/*  */
	margin: 0;
	padding: 0;

	/* 点击高亮效果 *//* 手指点击 清除默认的 高亮效果 透明 */
	-webkit-tap-highlight-color: transparent ;

	/* 盒子模型 */
	/* 样式输入完毕 在后面tab */
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	/* 统一设置文字  sans-serif 移动端 的默认字体 */
	font-family: '微软雅黑',sans-serif;
}

/* input标签 去掉默认样式 */
input{
	border: none;
	-webkit-appearance: none;
}

/* a标签的下划线 */
a{
	text-decoration: none;
}

/* 去掉小圆点 */
ol,ul{
	list-style: none;
}

/* 清除浮动 */
.f_l{
	float: left;
}
.f_r{
	float: right;
}

/* 清除浮动 */
.clearfix::before,
.clearfix::after{
	content:'';
	display: block;
	line-height: 0;
	height: 0;
	visibility: hidden;
	clear: both;
}