如何才能在不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上,有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。很多网站的做法是对不同终端设计多个网页,但这样会有很多维护的问题,这样采用自适应会更好些。屏幕不断伸缩的情况下,网页会根据屏幕的大小自动调整信息展示,不同的视感冲击,感觉很酷炫,出于好奇和新鲜感,自己试着研究了下。
1、什么是自适应
自适应设计(Responsive Design)是指创建网站时仅用一套代码即可令它适应各种不同的屏幕尺寸。2010年,Ethan Marcotte提出了”自适应网页设计”(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。
2、允许网页宽度自动调整
在网页代码的头部,加入一行viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1" />
网页默认等于屏幕宽度,原始缩放比例为1.0,即网页初始大小占屏幕面积的100%。
浏览器推出了“viewport meta”标签,许多移动浏览器现在都支持这个标签,W3C 协议定义 viewport meta 目前还属于草案,很多人都會在html head 处加上 viewport 这个meta data。
viewport设置属性如下:
width:可设定数值,或者指定为 device-width height:可设定数值,或者指定為 device-height initial-scale:第一次进入页面的初始比例 minimum-scale:允许缩小最小比例 maximum-scale:允许放大最大比例 user-scalable:允许手指缩放,1 or 0 (yes or no)
3、CSS3 Media Query
自动探测屏幕宽度,然后加载相应的css文件
media queries是一个非常好用的、强大的工具,它可以实现样式跟随屏幕分辨率而定。
自适应设计的关键是根据屏幕的宽度(width)来实时加载备选的样式或增加特定的样式。
Media Query的使用方法 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
参数解释:
width = device-width:宽度等于当前设备的宽度 initial-scale:初始的缩放比例(默认设置为1.0) minimum-scale:允许用户缩放到的最小比例(默认设置为1.0) maximum-scale:允许用户缩放到的最大比例(默认设置为1.0) user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面) 使用: @media 设备类型 and (设备特性){样式代码}
4、HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>foodsense</title>
<link rel="stylesheet" type="text/css" href="common.css">
</head>
<body id="home-page">
<div id="wrap">
<header role="masthead"><h1 id="branding">Food Sense</h1>
<nav>
<ul>
<li id="t-tastemakers"><a href="#">Taskmakers</a></li>
<li id="t-blog"><a href="#">Blog</a></li>
<li id="t-vendors"><a href="#">The A-List</a></li>
<li id="t-contribute"><a href="#">Contribute</a></li>
<li id="t-about"><a href="#">About</a></li>
</ul>
</nav>
</header>
<div id="content"></div>
</div>
</body>
</html>
5.CSS代码
以下是CSS部分代码展示
/*大一点的PC*/
@media only screen and (min-width: 1176px) {
body {
width: 1080px;
}
#content {
float: right;
width: 896px;
}
}
/*retina 屏幕 图片要显示的更清晰 需要两倍大的图片*/ /*最小设备的像素比 设定为2 device物理设备-pexil像素-ratio 物理像素点 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
header h1#branding {
background-position: left bottom;
background-size: 120px auto;
}
}
/*媒体选择器 手机*/
@media only screen and (max-width: 767px) and (max-width: 480px) {
body {
width: 480px;
padding: 0;
}
header[role="masthead"] {
width: 100%;
margin: 20px 0;
}
header h1#branding {
margin-left: 20px;
}
nav {
top: 65px;
right: 25px;
width: 315px;
height: 20px;
font-size: .75em;
background: transparent;
border-bottom: none;
box-shadow: none;
}
nav ul {
position: absolute;
right: 0;
}
nav li {
display: inline;
margin: 0;
}
nav a {
float: left;
margin: 0 0 0 4px;
padding: 5px 5px 0 5px;
}
}
/*竖着拿手机*/
@media only screen and (max-width: 480px) {
header[role="masthead"] {
width: 100%;
margin: 69px 0px 29px;
}
body {
width: 320px;
padding: 0;
}
header h1#branding {
margin: 0 auto;
}
nav {
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: .75em;
border-bottom: 1px solid #E5E5E5;
box-shadow: 0 1px 0 #f5f5f5;
}
nav li {
display: inline;
margin: 0;
}
nav li#t-tastemakers a, nav li#t-blog a, nav li#t-vendors a, nav li#t-contribute a, nav li#t-about a {
background-image: none;
}
nav a {
float: left;
margin: 0;
padding: 16px 7px 6px;
}
}
在HTML结构中,我们写的最多的就是div。好像哪个地方不用div,心里就觉得不舒服,有时候更多的使用div就会给我们写CSS带来不必要的麻烦。在上面的HTML结构中,我们可以看到header,nav标签,在HTML结构中使用语义化标签是好的选择,这样,结构更好,更利于搜索引擎的抓取(SEO的优化)和开发人员的维护(可维护性更高,因为结构清晰,so易于阅读),更有利于特殊终端的阅读(手机,个人助理等)。 制作一个响应式网站,就相当于有了三个网站,电脑、手机、平板都能完美显示。网站的版块可随着设备屏幕的不同尺寸自动改变位置,网站文字可以在不同设备显示合适的大小,无需让用户将局部放大、缩小查看(这不就是我们追求的增强用户体验么)。让使用不同设备访问的用户都能获得最佳的浏览体验。响应式设计可以为电脑、手机、平板等不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,已成为大势所趋。
结语
文章有描述不当的地方,跪求批评指正,互相学习。