html - 通用头文件的写法

电脑端通用meta

<!-- 字符集设置 -->
<meta charset="utf-8" />
<!-- 网站关键字 -->
<meta name="keywords" content="网站设计,网站开发制作,SEO优化,webapp,网站手机端应用">
<!-- 网站描述 重要属性之一 -->
<meta name="description" content="狐狸数据,致力于电脑端网站及移动端webapp网站应用开发与优化，为中小企业需求及建站爱好者提供交流服务平台"> 

手机端通用Meta

<!-- 关键字 -->
<meta name="keywords" content="治疗记录,用药记录,记录助手">
<!-- 描述 -->
<meta name="description" content="记录助手小工具,提供快捷记录,报表下载,记录导入等相关功能"> 
<!-- 滑动顺滑 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 页面固定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

通用css

/*去除所有控件默认间距*/
*{
	margin: 0px;
	padding:0px;

	/*文字选不中*/
	/*
	user-select：none |text| all | element
    none：文本不能被选择  
    text：可以选择文本 
	all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
	element：可以选择文本，但选择范围受元素边界的约束
	*/

	moz-user-select: -moz-none;
	-moz-user-select: none;
	-o-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/*字间距*/
	letter-spacing:0.5px;

	/*预设字体*/
	font-family: 'Segoe UI', 'Roboto', arial, sans-serif;

    /*手机端附加*/
    /*网页端顺滑滚动*/
	-webkit-overflow-scrolling: touch;	

	/*取消灰色背景*/
	appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;

    /*关闭高亮*/
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent !important;	
}

/*不同手机页面匹配不同文字大小*/
/*更小单位手机*/
@media screen and (min-width:280px){
	html{font-size:28px;}
}

/*iphone5*/
@media screen and (min-width:320px){
	html{font-size:32px;}
}


/*iphone6*/
@media screen and (min-width:375px){
	html{font-size:37.5px;}
}

/*iphone6p*/
@media screen and (min-width:414px){
	html{font-size:41.4px;}
}

/*让div可以接收百分比参数*/
html,body{
	height: 100%;
}

body{
	/*background-color: black;*/
	z-index: -999;
	overflow: hidden;
}

span{
    display:inline-block;
}

/*布局方法*/
/*垂直居中*/
.vertical_center{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
}

/*水平居中*/
.horizontal_center{
	position: absolute;
	left:50%;
	transform: translateX(-50%);
}


/*水平垂直居中*/
.double{
	position: absolute;
	left:50%;
	top:50%;
	white-space: nowrap;
	transform: translate(-50%,-50%) !important;
}