最新消息:

CSS第8款:七彩自适应网页-红橙绿蓝靛紫可删减

CSS模块 杨红伟 1717浏览

Ps:(1)如果你不想看前边,直接跳过,看第四点!

(2)为什么定义七彩?七彩七种布局,可任意删减!

记得去年做一个网站“反应品牌设计”的时候,客户对我的要求还是相当高的,一方面前端要求挺高,另一方面还要求自适应的实现等等。设计师的眼光比较指挑剔,和我们常人的眼光不同!其中自适应我当时没有做过,虽然听说过而且去年也研究过一段时间,但是感觉还不够深入,总感觉哪里错误了!也懂Bootstrap,但BS也做不出那种效果!再后来做完第一版内容的时候,因为忙我就没有再没有研究过……

昨天看到了一个网站叫“蒸气多”,网站虽然不出名(不是这打广告哈)。但我打开后,吃惊了一下!

(一)网站的背景是高级灰,让人很舒服;

(二)网站采用自适应设计,当小页面时有一部分内容不显示

(三)列表页、内容页简单且舒服

(四)注册页、登录页弹窗而平滑设计,搜索弹出页很漂亮

(五)这个网站居然采用Wordpress

我很欣赏这个网站的制作风格!做了好几年前端的我,好多特效我也做不出来。说了这么多了,该书归正转了!我的这个就是这个网站的自适应模块!

这篇文章代码量虽然不多,但花了我一天的时间!现在书归正传,开始写代码!

一:分辨率描述(如果不感兴趣这点可以不看)

如今的终端好多啊!简单是乱花渐入迷人眼!包括电脑、平板电脑、手机、电视等。而不同的终端相关的配置却也不相同!

1、电脑的分辨率:

1440*900、1366*768、1360*768、1280*800、1280*720、1024*768、800*600等。

2、手机的分辨率:

128*128、128*160、240*320(常见2.0 2.2 2.4 2.8寸屏手机使用)  

320*240(常见2.4寸屏手机使用)  

240*400(常见3.0寸屏手机使用)

320*480(主流屏常见3.2 3.5寸屏手机)  

360*640(诺基亚常见)  

480*800(常见4.0寸屏使用)  

480*854(常见3.7寸屏使用)

3、平板的分辨率:

960*540(QHD常见4.0 4.3 4.5寸使用)  

960*640(常见苹果机使用)

1136*640(常见苹果5使用)

1280*720(HD主流屏常见4.3 4.5 4.7 5.0 5.5 5.7 6.0寸屏使用)

1280*768(常见4.5寸屏使用)

1280*800(常见三星5.3寸及平板电脑使用)  

1024*600(常见7.0寸屏平板电脑使用)  

1024*768(常见LG5.0寸屏及7.9寸9.7寸平板电脑使用)

1920*1080(FHD主流屏常见4.7 5.0 5.0 5.7 6.0寸手机及电视使用)

1920*1280 (常见9.0寸平板电脑使用)  

1920*1200(常见10.1寸平板电脑及酷派大神7.0使用)  

2048*1539(常见苹果iPad 及国产一些平板使用)

4、电视的分辨率:

2560×1440(2k屏)

4096×2160(4K屏常见电视使用)

5、iphone的分辨率:

设备 屏幕尺寸 分辨率(pt) Reader 分辨率(px) 渲染后 PPI
iPhone 3GS 3.5吋 320x480 @1x 320x480 163
iPhone 4/4s 3.5吋 320x480 @2x 640x960 330
iPhone 5/5s/5c 4.0吋 320x568 @2x 640x1136 326
iPhone 6 4.7吋 375x667 @2x 750x1334 326
iPhone6 Plus 5.5吋 414x736 @3x 1242x2208 1080x1920 401

综述以上,分辨率(我们这里只说宽度)共有以下18种:128、240、320、360、480、640、750、960、1024、1080、1136、1242、1280、1360、1366、1440、1920、2048

二:自适应所用的知识

1、HTML插入meta

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

2、媒体查询代码 media query两种方法

判断媒体类型,引用不同的样式表

<link rel=”stylesheet” media=”screen and (判断条件)” herf=”需要调用的样式表文件” />

通过设定屏幕的判断条件,调用对应的css文件。该实例多用于整页面不同风格的css调用与选取,使用该方法可能需要为一个页面制作多份个css文件。如: 

screen and (min-width:900px) and (max-width:1024px)

判断媒体类型,执行不同的css样式属性,如:

@media only screen and (max-width:240px){
.box{width:200px;}
.title{color:red;}
}

注:用min-width时,小的放上面,大的在下面;

      用max-width时,大的在上面,小的在下面。

所以我们用的时候,最好养成习惯与易读性,最好按max标准,如下:

@media screen and (max-width: 1300px){ //<=1300px的设备 }
@media screen and (max-width: 1220px){ //<=1220px的设备 }
@media screen and (max-width: 1170px){ //<=1170px的设备 }

我们要用的大多数是常用的分辨率,不用那些太偏的。先看一下我们常用的显示器的分辨率有哪些?

三:我们怎么定义才最合适

在我的笔记本电脑,有这几种设置方式 1366px,1360px,1280px,1024px,800px。因为现在800px的体验太差了,而且几乎都不存在了,所以我们把它略去了。而手机版960px是一个界限!1360px和1366px只差6px ,因此我们只用1360px。还有一种1136px和1440px也是常用的!

最终我们就应该设置五种分辨方式,分别是等于1440px、等于1360px、等于1280px、等于1136px、等于1024px、等于960px(手机版苹果常用的),几本是每100px之间一个定义。

因为我们做网页时,左右都要留白,因此我们定义分别是等于1400px、等于1300px、等于1200px、等于1100px、等于1000px(也有人定义980px)、等于960px(手机版苹果常用的),电脑版差不多每100px之间一个定义。

我们在做网页的时候,比如我现在最大的显示器像素是2048px,而目前的网页最大的分辨率为1440px,因此我们定义网页显示最大为1440px。

例:总宽度为屏幕宽度,container是容器宽度,left是左边,right是右边的。

移动时动态效果如下:

屏幕大于1440px时,拖动浏览器变小时,会逐渐看到效果!

我是这样做的 min+(max-min)/2 ,比如说1024+(1280-1024)/2=1152。其他计算广法类同!
到了2048px和1440px之间,一直是1440px,container变成1440px,left为68%,right为30%且背景为红;

到了1440px和1360px之间(左右结构),比如说1400px,container变成1300px,left为58%,right为40%且背景为橙;

到了1360px和1280px之间(左右结构),比如说1320px,container变成1200px,left为48%,right为50%且背景为黄;

到了1280px和1136px之间(左右结构),比如说1208px,container变成1060px,left为38%,right为60%且背景为绿;

到了1136px和1024px之间(左右结构),比如说1080px,container变成1000px,left为28%,right为70%且背景为蓝;

到了1024px和960px之间(左右结构),比如说992px,container变成961px,left为18%,right为80%且背景为靛;

到了960px及以下,container宽度为100%,left消失,right为100%且背景为紫;
这样我们应用就比较好实现了,设置如下:

@media only screen and (max-width: 2048px){  }-红
@media only screen and (max-width: 1400px){  }-橙
@media only screen and (max-width: 1320px){  }-黄
@media only screen and (max-width: 1208px){  }-绿
@media only screen and (max-width: 1080px){  }-蓝
@media only screen and (max-width: 992px){  }-靛
@media only screen and (max-width: 960px){  }-紫

四:布局应用

下载地址:http://git.oschina.net/hongweizhiyuan/selfadaption

演示地址:http://www.ijquery.cn/demoqianduan/selfadaption/index.html
下图图示分辨率1360px-1440px全屏显示

下图图示分辨率1024px-1136px之间


下图图示iphone6手机的效果(紫)

1、HTML代码(这里的颜色及距离我写成了行列式)

<!doctype html>
<html>
	<head>
		<meta charset="gb2312">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>CSS第8款:七彩自适应网页-红橙绿蓝靛紫可合并</title>
		<!-- 360内核浏览器访问 -->
		<meta name="renderer" content="webkit">
		<!-- 拒绝百度手机转码 -->
		<meta http-equiv="Cache-Control" content="no-siteapp"/>
		<!-- 加载CSS样式 -->
		<link href="//cdn.bootcss.com/normalize/3.0.3/normalize.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<!-- 加载Jquery库 -->
		<script src="hjs/jquery.min.js"></script>
	</head>
	<body style="background: #f4f5f7;">
		<div class="container" style="margin-top:30px;">
			
			<!--left start-->
			<div class="left fl">
				<div style="background-color: #fff;height:200px;">
					内容左一
				</div>
				<div style="height:20px;"></div>
				<div style="background-color: #fff;height:200px;">
					内容左二
				</div>
			</div>
			<!--left end-->
			
			<!--right start-->
			<div class="right fr" style="height:420px;">
				内容右一
			</div>
		</div>
		<!--right end-->
		
		
	</body>
</html>

2、CSS样式

.fl {
	float: left;
}
.fr {
	float: right;
}

.container {
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box
}
	
@media only screen and (max-width:  2048px){ 
	.container {
		width: 1440px;
	}
	.left {
		width:68%;
	}
	.right {
		width:30%;
		background:#FF0000;/*红*/
	}
}

@media only screen and (max-width: 1400px){ 
	.container {
		width: 1300px;
	}
	.left {
		width:58%;
	}
	.right {
		width:40%;
		background:#FFA500;/*橙*/
	}
}

@media only screen and (max-width: 1320px){ 
	.container {
		width: 1200px;
	}
	.left {
		width:48%;
	}
	.right {
		width:50%;
		background:#FFFF00;/*黄*/
	}
}

@media only screen and (max-width: 1208px){ 
	.container {
		width: 1060px;
	}
	.left {
		width:38%;
	}
	.right {
		width:60%;
		background:#008000;/*绿*/
	}
}

@media only screen and (max-width: 1080px){ 
	.container {
		width: 1000px;
	}
	.left {
		width:28%;
	}
	.right {
		width:70%;
		background:#0000FF;/*蓝*/
	}
}

@media only screen and (max-width: 992px){ 
	.container {
		width: 961px;
	}
	.left {
		width:18%;
	}
	.right {
		width:80%;
		background:#4B0082;/*靛*/
	}
}

@media only screen and (max-width: 960px){ 
	.container {
		width: 960px;
	}
	.left {
		display:none;
	}
	.right {
		width:100%;
		background:#800080;/*紫*/
	}
}