【PHP】php通过javascript判断不同设备分辨率来调用不同的css class

代码下载http://download.csdn.net/detail/u013138426/8952715

这是我在暑假的时候，二次开发自己的php网站在设计login的时候所写的实例，这个两个css分别是宽屏1024、1366上的。

Javascript ，win-img-resolution.js

var scWidth = screen.width;
if(scWidth <= 800){
	//应该是800*600的分辨率
}
if(scWidth<=1024){
	document.write('<link href="style-1024-768.css" rel="stylesheet" type="text/css">');
}
else if(scWidth>=1366){
	//1366
	document.write('<link href="style-1366-768.css" rel="stylesheet" type="text/css">');
}

css ,style-1366-768.css 文件

.msgtext{
/*上右下左*/
margin-top:20px;
margin-left:120px;
}
.loginback{
margin-top:100px;
margin-left:210px;
}
/* *******************************1024x768******************************* */
<style type="text/css">
.footerdiv
{
padding-top:230px;	
}
/*所在的中间背景*/
.centerback
{
	background-color:rgba(73,73,75,0.2) ;/*透明度*/
	padding-top:20px;
    height:460px;
    width:60%;	
	margin:10% 20% 20px 20%;
	//margin-left: 30%;
}
.background
{
    right: 0px;
    bottom: 0px;
    background: transparent radial-gradient(ellipse at center center , #667986 0px, #3C474F 100%) repeat scroll 0% 0%;
    color: #FFF;
    /*背景文字的对齐方式text-align: left;*/
}
.login-form 

{	float:left;/*左浮动*/
	width: 320px;
	height: 320px;
	left: 50%;
	top: 50%;
	margin-left: 30%;
	margin-top: -33%;
}
/*红点*/
.must{		
	color:red;
}
.sideline {
    display: inline;
    float: left;
    margin: 0 10px;
    width: 380px;
}
input[type="text"],input[type="email"],input[type="password"], input[type="url"], input[type="tel"], input[type="number"],select[name="province"],select[name="city"],select[name="areaid"]{
    /*background: white none repeat scroll 0 0;*/
    background:#6E7F8D;/*input 背景颜色*/
	
    border: 0 none;/*边框属性*/
	color: #fff !important;
	font-size: 20px;
    border-radius: 5px;/*圆角*/
    box-shadow: 0 0 0 1px #e1e1e1, 0 1px 1px rgba(0, 0, 0, 0.05) inset;
    padding: 5px 5px;
}
input[type="text"]:focus,input[type="email"]:focus, input[type="password"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="number"]:focus , select[name="city"]:focus, select[name="areaid"]:focus{
    box-shadow: 0 1px px 0 rgba(34, 36, 38, 0.25), 0 2px 0 0 rgba(25, 2, 255, 0.15) inset, 0 0 0 1px #3c3c3c inset;
    outline: medium none;
}
/*确认注册按钮*/
.btn-regi{
    background-color: #0095ff;
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px px 0 rgba(34, 36, 38, 0.25), 0 2px 0 0 rgba(25, 2, 255, 0.15) inset, 0 0 0 1px #3c3c3c inset;
    color: #fff !important;
	border-radius: 5px;/*圆角*/
    clear: both;
    color: #ccc;
    display: inline-block;
    font-size: 14px;
    line-height: 1.1em;
	margin-left: 85px;
    //padding: 0.6em 1em;/*内边距*/
    opacity: 0.6;
}
/*登录login*/
.btn-login{
    background-color: #0095ff;
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px px 0 rgba(34, 36, 38, 0.25), 0 2px 0 0 rgba(25, 2, 255, 0.15) inset, 0 0 0 1px #3c3c3c inset;
    color: #fff !important;
	border-radius: 5px;/*圆角*/
    clear: both;
    color: #ccc;
    display: inline-block;
    font-size: 14px;
    line-height: 1.1em;
	margin-left: 85px;
    padding: 0.6em 1em;/*内边距*/
    opacity: 0.6;
  
}
/* ***********************  */
.user {
display: inline-block;
float: left;
color: #333;
font-size: 13px;
line-height: 24px;
margin-left: 20px;
}

css，style-1024-768.css

.msgtext{
/*上右下左*/
margin-top:40px;
margin-left:40px;
}
.loginback{
margin-top:100px;
margin-left:120px;
}
/* *******************************1024x768******************************* */
<style type="text/css">
.footerdiv
{
padding-top:230px;	
}
/*所在的中间背景*/
.centerback
{
	background-color:rgba(73,73,75,0.2) ;/*透明度*/
	padding-top:20px;
    height:460px;
    width:60%;	
	margin:10% 20% 20px 20%;
}
.background
{
    right: 0px;
    bottom: 0px;
    background: transparent radial-gradient(ellipse at center center , #667986 0px, #3C474F 100%) repeat scroll 0% 0%;
    color: #FFF;
    /*背景文字的对齐方式text-align: left;*/
}
.login-form 

{	float:left;//左浮动
	width: 320px;
	height: 320px;
	left: 50%;
	top: 50%;
	margin-left: 30%;
	margin-top: -33%;
}
/*红点*/
.must{		
	color:red;
}
.sideline {
    display: inline;
    float: left;
    margin: 0 10px;
    width: 380px;
}
/*login/reg端公用*/
input[type="text"],input[type="email"],input[type="password"], input[type="url"], input[type="tel"], input[type="number"],select[name="province"],select[name="city"],select[name="areaid"]{
    background: #6E7F8D;/*input 背景颜色*/
    border: 0 none;/*边框属性*/
	color:#fff;/*输入框字体颜色*/
	font-size: 20px;
    border-radius: 5px;/*圆角*/
    box-shadow: 0 0 0 1px #e1e1e1, 0 1px 1px rgba(0, 0, 0, 0.05) inset;
    padding: 2px 2px;
}
input[type="text"]:focus,input[type="email"]:focus, input[type="password"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="number"]:focus , select[name="city"]:focus, select[name="areaid"]:focus{
    background: #3c3c3c;
    box-shadow: 0 0 0 2px #30a9ff, 0 1px 1px rgba(0, 0, 0, 0.05) inset;
    outline: medium none;
}
/*确认注册按钮*/
.btn-regi
{
    background-color: #0095ff;
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px px 0 rgba(34, 36, 38, 0.25), 0 2px 0 0 rgba(25, 2, 255, 0.15) inset, 0 0 0 1px #3c3c3c inset;
    color: #fff !important;
	border-radius: 5px;/*圆角*/
    clear: both;
    color: #ccc;
    display: inline-block;
    font-size: 14px;
    line-height: 1.1em;
	margin-left: 85px;
    //padding: 0.6em 1em;/*内边距*/
    opacity: 0.6;
}
/*登录login*/
.btn-login{
    background-color: #0095ff;
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.3) 0px, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px px 0 rgba(34, 36, 38, 0.25), 0 2px 0 0 rgba(25, 2, 255, 0.15) inset, 0 0 0 1px #3c3c3c inset;
    color: #fff !important;
	border-radius: 5px;/*圆角*/
    clear: both;
    color: #ccc;
    display: inline-block;
    font-size: 14px;
    line-height: 1.1em;
	margin-left: 85px;
    //padding: 0.6em 1em;/*内边距*/
    opacity: 0.6;
}
.user {
display: inline-block;
float: left;
color: #333;
font-size: 13px;
line-height: 24px;
margin-left: 20px;
}

Public_main.html 全站头部引用

<div>
<style type="text/css">
/*横栏入口*/
 .head {/*仿新浪微博*/
	color: #000;					/*字体颜色*/
	position: relative;
	position: fixed;/*位置固定*/
	_position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;/*可用于将在一个元素放置于另一个元素之后*/
	width: 100%;
	height: 60px;/*高度*/
	border-top: 0px solid #888888; /*立方体边框，3px粗*/
	box-shadow: 2px 2px 2px #888888;/*产生阴影*/
	background: #F7FBFE;
}
.head-line{
	width:200;
	height:60px;
	margin-top:-130px;/*距离顶部位置*/
	padding-top:100px;
	display:block;
	border-top:1.5px solid #888888;
}	

</style>
<div class="head">
<img src="logo.png" ></div> 
<p class="head-line"></p>

<div>

Public_footer.html 全站底部引用

<div>
<style type="text/css">
/*底脚边框，底脚全部变量*/
.footer
{	clear:both;
	background-color:rgba(0,0,0,0.6) ;/*透明度*/
	width:100%;
	overflow:hidden;
	zoom:1;
	height:100px;
	padding:15px 0px 0px 0px;
	color:#f0f0f0;
	
}
/*底脚白线*/
.footline
{
	float:left;   /*向左浮动*/
	width:100%;
	color:#f0f0f0;/*全部友情链接字体颜色*/
	margin-top:10px;
	padding-top:5px;
	border-top:3px solid #f0f0f0/*横线颜色，白*/
}

.friend 
{
    color: #f0f0f0;
	text-align:center
}
</style>

<!--Html显示部分-->
<div class="footer"><div>

<font size="4"><center>年轻人，就去超越！YOUNG,GO BEYOND！</center></font>

<!--css引用横线-->
<div class="footline" ></div>

<center>
<ul>
<a class="friend" class="friend" href="/" target="_blank">服务条款  </a>
<a class="friend" href="http://tb.godpu.com/" target="_blank">|  贴吧签到  </a>
<a class="friend" href="http://weibo.com/Naruzi" target="_blank">|  新浪微博  </a>
<a class="friend" href="http://t.qq.com/jigaozheng2008" target="_blank">|  腾讯微博  </a>
</ul>
</center>
<p align="center">COPYRIGHT &copy; 2015 - 2016  VEaBa GodPu  AdminGod Inc. ALL RIGHTS RESERVED.</p>
</div>
</div>
</div>   
</body>
</html>

登录的php文件,login.php

<!DOCTYPE html>
<html>
<head>
<!--开发日记，还需要添加javascript进行支持，参考原先-->
<title>账户登录-叶箫大人信</title>
<meta charset="gb2312">
<?php include("Public_main.html");?>
<!--解决1024 1366宽屏问题-->
<script type="text/javascript">
var scWidth = screen.width;
if(scWidth <= 800){
}else if(scWidth<=1024){
	//1024*768

	document.write('<link href="style-1024-768.css" rel="stylesheet" type="text/css">');
}else if(scWidth>=1366){
	//1366*768
	document.write('<link href="style-1366-768.css" rel="stylesheet" type="text/css">');
}
</script>
<!--The end -->

<!--margin 上右下左-->
<div><class="user"></div>
</head>
<!--body开始-->
<body class="background">

<div class="centerback">
<!--form表单登录开始-->
<form action="/index.php?m=Users&a=checklogin" method="post" class="loginback">
		<label  for="f_cf_name" class="red-star"> 账户名称：</label>
		<input type="text" id =“username” name="username" tabindex="1" align="center" placeholder="账号" autocomplete="off" maxlength="16"  style="height:30px;">
		<span class="must"> *</span>
		<font size="2"class="help-inline" style=" color:#c0c0c0;">你的登录账号</font><br/><br/><br/>
		
		<label for="jf_cf_email" >登录密码：</label>
		<input type="password" id="password" name="password" tabindex="2" align="center" placeholder="密码" autocomplete="off" maxlength="20" style="height:30px;">
		<span class="must"> *</span>
		<font size="2"class="help-inline" style=" color:#c0c0c0;">密码</font><br/><br/>
		<br/>
		<button class="btn-login" type="submit" id="login_button"style="width:230px; height:35px;"> 登 录 login</button>
	  <a href="default.htm" style="display: none;" id="jf_cf_button_show" >Send another message</a>
		<input type="hidden" name="__hash__" value=""/>
	</div>
</form>
<!--form表单登录结束-->
</div>
</body>	
<div class="footerdiv">
<?php include("Public_footer.html");?>
</div>	
</html>