web开发-怎么做响应式网站

[shanhe]

大家好我是山河，鉴于很多小伙伴需要搞响应式网站，但是又无从下手，所以山河抽时间给大家写了一篇文章，个人认为应该算是通俗易懂。

ps: 特此声明：本文章是从山河本人的博客转载的
文章原地址：制作响应式网站教程 – 山河技术分享 (shanhe.info)
文章采用创作共用版权 CC BY-NC-SA 3.0 CN 许可协议，转载或复制请注明出处
此许可协议仅用于文章内容，对本文章代码不适用，允许自由转载代码而无需指向本博客文章链接。

好了，开始教程。
1.了解什么是响应式网页设计
2.了解 viewport 和 媒体查询
3.网页布局技术


下面我们开始讲解第一点

了解什么是响应式网页设计：

响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

此概念于2010年5月由国外著名网页设计师Ethan Marcotte所提出。

响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。



之后是第二点

了解 viewport 和 媒体查询

所谓 viewport(视窗) 呢，就是我们眼睛能看见的地方，而在浏览器中，就是我们能在浏览器中看见的区域。

viewport 山河就不解释这么多，直接给大家常用的移动端的布局窗口设置

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

上面这个代码的作用是让当前 viewport 的宽度等于 设备 的宽度，且禁止用户缩放。

viewport 详细的内容和参数 可以去 MDN 或 w3c 查看，这里就不多讲了。



然后山河来讲 媒体查询

那什么是媒体查询 ( @media 查询 ) 呢？

响应式设计仅仅是因为媒介查询才新兴起来的。此话可以在 MDN 上查到

CSS2 中引入了 @media 规则，它让为不同媒体类型定义不同样式规则成为可能。

下面来一个媒体查询的简单案例

@media screen and (max-width: 480px) {

  body {

    background: blue;

  }

}

此代码解释：当浏览器宽度达到 480px 或更小时，背景颜色改变为blue(蓝色)

然后具体的内容也是可以去MDN和w3c去看看，这里时间紧迫，山河就不讲这么仔细了。


接下来山河开始讲现代网页布局方式。

1. 弹性布局
2. 多列布局
3. 网格布局

山河推荐使用 弹性布局的方式，山河 个人认为 它比多列布局，网格布局简便

由于时间关系，山河就只写一个弹性布局+viewport +媒体查询的方式给大家作为例子，多列布局和网格布局可以去MDN或w3c上查看相关资料，直接上代码。
由于本论坛上传长代码会导致BUG，所以大家请直接下载代码。
代码下载地址

效果预览图

手机端

平板端

PC端

好了，本文到此结束，希望能帮助到大家

文章 © 山河

有问题可以评论或者联系山河的邮箱。

ps: 本文章是从山河本人的博客转载的
文章原地址：制作响应式网站教程 – 山河技术分享 (shanhe.info)
文章采用创作共用版权 CC BY-NC-SA 3.0 CN 许可协议，转载或复制请注明出处
此许可协议仅用于文章内容，对本文章代码不适用，允许自由转载代码而无需指向本博客文章链接。