【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 © 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>