首页 开发指南

今天碰到一个客户的网站,出了一个问题,就是手机端和PC的显示问题,上网站查了一下资料,终于找到了问题所在,把原文存了下来。以供以后学习。

响应式WEB设计模式基于“移动第一”的原则而提出。

主要使用如下基本技术要素:
viewport meta标签, 可以在浏览器中禁止zoom
排版,根据设备大小自动剪裁,包括字体大小和垂直空间布局
大屏幕设备采用grid布局,小屏幕设备缺省使用单列
针对特定代理做一定的设计折中

通过使用这样的技术策略,可以达到良好的网页屏幕自适应效果,尽可能消除不同屏幕尺寸上用户体验的落差。
如果符合上面的设计,header看起来会是这样:

<!DOCTYPE html>
<html dir=”ltr” lang=”en-US”>
<head>
<meta charset=”UTF-8″ />
<title></title>
<meta name=”viewport” content=”width=device-width” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”core.css” />
<link rel=”stylesheet” type=”text/css” media=”screen and (min-width:640px)” href=”grid.css” />
<!–[if lte IE 8]>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”ie/core.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”grid.css” />
<![endif]–>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”style.css” />
</head>

我们把它分解成和响应式WEB设计对应的部分,首先是基础的html文档类型.
有些人会把它称作HTML5,实际上就是一个简洁的文档类型声明。

<!DOCTYPE html>

接下来是一个meta标签。名字为viewport,值为width=device-width。
比如,在iPhone的Safari上,默认宽度为980px,这导致即使内容仅仅是自适应宽度的文本,页面也被缩小呈现。
这个meta标签禁用zoom功能并提供宽度刚好的文本显示。

<meta name=”viewport” content=”width=device-width” />

core.css样式表是排版、定位和可复用组件样式的主要源文件,core.css不应该包含颜色、边线、背景图片这些元素,
下面是一个样例轮廓,以伪代码描述:
– Basic typography, but ideally no styling at all. Instead rely on the user-agent.

@media screen, projection {
– Minimal resets if any
– Basic typography such as font family. Provide a stack back to serif and sans-serif.
– Reusable component styles e.g. boxes, comments, meta information on an article, etc
}

@media screen and (max-width:480px) {
– Typography for phone screens e.g. font-size, font-size-adjust, line-height
}

@media screen and (min-width:480px) {
– Typography for tablet and desktop screens e.g. font-size, font-size-adjust, line-height
}

@media screen and (min-width:960px) {
– Constrain the content width to 960px or some similar width
– Center the page in the screen
}

@media screen and (min-width:1600px) {
– Large screen design. Highly dependent on use case.
}

一旦设备尺寸超过640px,我们引入一个包含grip布局声明的样式表文件。这可以是960.gs,blueprint grid, YUI grids, OOCSS grids, 或者homespun grid。
必须注意到html文档已经被grid样式中的类标记了,只是在屏幕尺寸没有超过960px时,不起作用。这就是小屏幕单列布局变换成grid布局的秘密。

<link rel=”stylesheet” type=”text/css” media=”screen and (min-width:640px)” href=”grid.css” />

对于ie8以及之前的版本而言,响应式设计会遇到麻烦,因为ie8某种程度上说是还只是停留在桌面系统上工作的浏览器,尽管仍然占有很大的市场和关注度。
ie8不能识别高级的媒介查询条件,比如上面grid.css样式表中所用到的(min-width: 640px),因此除了这个grid样式表,我们同时也加载一个ie重载样式表。

<!–[if lte IE 8]>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”ie/core.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”grid.css” />
<![endif]–>

一些老版本的现代浏览器(Firefox, Safari 以及Opera)可能也只是有限制的支持媒介查询条件,
尽管用户通常会保持这些浏览器版本的更新,但如果grid布局在某些版本的浏览器中需要得到支持,有很多polyfill脚本,比如jQuery Media Helpers。
什么是polyfill,请参阅:http://remysharp.com/2010/10/08/what-is-a-polyfill/

在不使用grid布局的情况下,页面缺省以单列呈现,尽管不尽完美,但至少可以访问。

最后,响应式WEB设计应该把文档结构(core.css)和纯粹的页面风格(style.css),如字体、边界、背景图片、渐变、文本变换等区分开来。

<link rel=”stylesheet” type=”text/css” media=”screen” href=”style.css” />

上面所列的代码,还是一个在不断试验和发展中的响应式设计,随着时间的推移,以及设备的发展,这里表述的设计本身也将得到发展。

不过这可以成为开展我们自己工作的一个好的起点。

另一种介绍:

响应式WEB设计模式基于“移动第一”的原则而提出。

主要使用如下基本技术要素:

viewport meta标签, 可以在浏览器中禁止zoom
排版,根据设备大小自动剪裁,包括字体大小和垂直空间布局
大屏幕设备采用grid布局,小屏幕设备缺省使用单列
针对特定代理做一定的设计折中

通过使用这样的技术策略,可以达到良好的网页屏幕自适应效果,尽可能消除不同屏幕尺寸上用户体验的落差。
如果符合上面的设计,header看起来会是这样:

<!DOCTYPE html>
<html dir=”ltr” lang=”en-US”>
<head>
<meta charset=”UTF-8″ />
<title></title>
<meta name=”viewport” content=”width=device-width” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”core.css” />
<link rel=”stylesheet” type=”text/css” media=”screen and (min-width:640px)” href=”grid.css” />
<!–[if lte IE 8]>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”ie/core.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”grid.css” />
<![endif]–>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”style.css” />
</head>

我们把它分解成和响应式WEB设计对应的部分,首先是基础的html文档类型.
有些人会把它称作HTML5,实际上就是一个简洁的文档类型声明。

<!DOCTYPE html>

接下来是一个meta标签。名字为viewport,值为width=device-width。
比如,在iPhone的Safari上,默认宽度为980px,这导致即使内容仅仅是自适应宽度的文本,页面也被缩小呈现。
这个meta标签禁用zoom功能并提供宽度刚好的文本显示。

<meta name=”viewport” content=”width=device-width” />

core.css样式表是排版、定位和可复用组件样式的主要源文件,core.css不应该包含颜色、边线、背景图片这些元素,
下面是一个样例轮廓,以伪代码描述:
– Basic typography, but ideally no styling at all. Instead rely on the user-agent.

@media screen, projection {
– Minimal resets if any
– Basic typography such as font family. Provide a stack back to serif and sans-serif.
– Reusable component styles e.g. boxes, comments, meta information on an article, etc
}

@media screen and (max-width:480px) {
– Typography for phone screens e.g. font-size, font-size-adjust, line-height
}

@media screen and (min-width:480px) {
– Typography for tablet and desktop screens e.g. font-size, font-size-adjust, line-height
}

@media screen and (min-width:960px) {
– Constrain the content width to 960px or some similar width
– Center the page in the screen
}

@media screen and (min-width:1600px) {
– Large screen design. Highly dependent on use case.
}

一旦设备尺寸超过640px,我们引入一个包含grip布局声明的样式表文件。这可以是960.gs,blueprint grid, YUI grids, OOCSS grids, 或者homespun grid。
必须注意到html文档已经被grid样式中的类标记了,只是在屏幕尺寸没有超过960px时,不起作用。这就是小屏幕单列布局变换成grid布局的秘密。

<link rel=”stylesheet” type=”text/css” media=”screen and (min-width:640px)” href=”grid.css” />

对于ie8以及之前的版本而言,响应式设计会遇到麻烦,因为ie8某种程度上说是还只是停留在桌面系统上工作的浏览器,尽管仍然占有很大的市场和关注度。
ie8不能识别高级的媒介查询条件,比如上面grid.css样式表中所用到的(min-width: 640px),因此除了这个grid样式表,我们同时也加载一个ie重载样式表。

<!–[if lte IE 8]>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”ie/core.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”grid.css” />
<![endif]–>

一些老版本的现代浏览器(Firefox, Safari 以及Opera)可能也只是有限制的支持媒介查询条件,
尽管用户通常会保持这些浏览器版本的更新,但如果grid布局在某些版本的浏览器中需要得到支持,有很多polyfill脚本,比如jQuery Media Helpers。
什么是polyfill,请参阅:http://remysharp.com/2010/10/08/what-is-a-polyfill/

在不使用grid布局的情况下,页面缺省以单列呈现,尽管不尽完美,但至少可以访问。

最后,响应式WEB设计应该把文档结构(core.css)和纯粹的页面风格(style.css),如字体、边界、背景图片、渐变、文本变换等区分开来。

<link rel=”stylesheet” type=”text/css” media=”screen” href=”style.css” />

上面所列的代码,还是一个在不断试验和发展中的响应式设计,随着时间的推移,以及设备的发展,这里表述的设计本身也将得到发展。

不过这可以成为开展我们自己工作的一个好的起点。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

会员评论:(0)

声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!
©www.sbmzenith.com 2013-2020 All Rights Reserved.
豫ICP备15009393号