如何做自适应手机和PC端的网站|手机网站自动缩

来源:未知 人浏览 2015.10.15
直接上正文吧~~~~

@media screen and (min-width:350px){
.fourlist{padding:15px 0 5px 10px;}
.fourlist a{width:85px;display:block; text-decoration:none; font-size:12px;float:left; position:relative; color:#333; }
.fourlist a numb{right:16px;}
}

小编是用火狐的web开发者工具中的响应设计模式来测试的

小编这里用的是根据不同的屏幕宽度加载不同的css样式
<link rel="stylesheet" media="screen and (min-device-width: 384px)" href="style384.css" />
上面的代码表示:当访问网站的设备浏览器宽度大于等于384px时,将使用style384.css这个样式。

<link rel="stylesheet" media="screen and (min-device-width: 900px)" href="style900.css" />
上面的代码表示:当访问网站的设备浏览器宽度大于等于900px时,将使用style900.css这个样式。

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
上面的代码表示:当访问网站的设备浏览器宽度在701px和900px之间时,将使用medium.css这个样式

识别不同的屏幕来加载不同css样式的写法(个人比较喜欢这种方法,做起来比较简单 0.0)

写了之后但是在电脑上和几个手机上显示的不一样

所以需要在手机html页面里头部加入

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

不要问我这句是什么意思~~自己找度娘吧~(我也没深入了解过~)

网页显示移动端和PC端版面宽度大致划分一下,大致是:
  1. 手机屏幕:320~384
  2. note/pad屏幕:400-900
  3. PC端:900~
在实际项目中统计的结果表明,手机屏幕的宽度中的95%还在320~375宽。保证手机版画面主体内容在320宽内即可。

如果自己想测试下的话可以找个页面找几个手机测试测试下,测试代码如下:

<html>
<script>
function a(){
document.write(
"屏幕分辨率为:"+screen.width+"*"+screen.height
+"<br />"+
"屏幕可用大小:"+screen.availWidth+"*"+screen.availHeight
+"<br />"+
"网页可见区域宽:"+document.body.clientWidth
+"<br />"+
"网页可见区域高:"+document.body.clientHeight
);
}
</script>
<body onload="a()" >
</body>
</html>

不要忘记添加缩放代码了哦~

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

星期三
15年12月16日
热门板块
windows 10下载设计软件下载PhotoShop CC文章分享Portraiture磨皮win10安装教程
热门下载
Lightroom 5.2官方中文版下载下载(

Lightroom 5.2官方中文版下载下载(

下载
PhotoShop CC下载官方正版可激活版本

PhotoShop CC下载官方正版可激活版本

下载