Post

经验分享:CSS3的响应式布局

其实我并不喜欢响应式布局,现在给公司做的主题也是分开PC端和移动端来做。当然也有自己写的代码不够规范,兼容两种平台浏览器容易出问题的原因。

响应式我觉得只是通过css来控制显示和不显示,给予不同分辨率的样式不同,带来的问题比如隐藏元素一样会加载,旧手机访问卡顿等。

继续搬这个教程,即使我不喜欢,但还是要用到的。

做手机端网页需要用到响应式布局,首先需要再HTML文件头声明一下:

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

主要目的是宽度控制和禁止用户缩放,具体参数自己GOOGLE一下。

下面是CSS判断是PC端还是移动端
其实很简单,用CSS3的媒体查询就可以非常方便去实现,不需要用userAgent神马的那么麻烦。

/*最小宽度800就是PC端*/
@media all and (min-width: 800px) {
#nav {
width: 300px;
float: left;
margin-right: 20px;}
#grid {
width: 450px;
float: left;}
}
/*最大宽度799就是移动端*/
@media all and (max-width: 799px) {
#nav {
width: 100%;}
#grid {
width: 100%;}
}

知道了上面2点就可以实现响应式布局了,是不是非常简单?
移动端还有一些特殊的事件(手指滑动)神马的,后续我再专门写篇移动端的JS文章好了。

 

题外,复制一段代码,判断手机还算电脑访问:

<?php
function isMobile(){
$useragent=isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : '';
$useragent_commentsblock=preg_match('|\(.*?\)|',$useragent,$matches)>0?$matches[0]:'';
function CheckSubstrs($substrs,$text){
foreach($substrs as $substr)
if(false!==strpos($text,$substr)){
return true;
}
return false;
}
$mobile_os_list=array('Google Wireless Transcoder','Windows CE','WindowsCE','Symbian','Android','armv6l','armv5','Mobile','CentOS','mowser','AvantGo','Opera Mobi','J2ME/MIDP','Smartphone','Go.Web','Palm','iPAQ');
$mobile_token_list=array('Profile/MIDP','Configuration/CLDC-','160×160','176×220','240×240','240×320','320×240','UP.Browser','UP.Link','SymbianOS','PalmOS','PocketPC','SonyEricsson','Nokia','BlackBerry','Vodafone','BenQ','Novarra-Vision','Iris','NetFront','HTC_','Xda_','SAMSUNG-SGH','Wapaka','DoCoMo','iPhone','iPod');

$found_mobile=CheckSubstrs($mobile_os_list,$useragent_commentsblock) ||
CheckSubstrs($mobile_token_list,$useragent);

if ($found_mobile){
return true;
}else{
return false;
}
}
if (isMobile())
echo '手机登录m.kouss.com';
else
echo '电脑登录www.kouss.com';
?>

Leave a Reply