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

你觉得本教程写的还可以吗

  • 四星

    选票: 0 0.0%
  • 三星

    选票: 0 0.0%
  • 二星

    选票: 0 0.0%
  • 一星

    选票: 0 0.0%

  • 全部投票
    1

shanhe

山河
管理成员
2020-02-26
66
31
18
26
中国
blog.shanhe.info
大家好我是山河,鉴于很多小伙伴需要搞响应式网站,但是又无从下手,所以山河抽时间给大家写了一篇文章,个人认为应该算是通俗易懂。

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 山河就不解释这么多,直接给大家常用的移动端的布局窗口设置

HTML:
<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 规则,它让为不同媒体类型定义不同样式规则成为可能。



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

CSS:
@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 许可协议,转载或复制请注明出处
此许可协议仅用于文章内容,对本文章代码不适用,允许自由转载代码而无需指向本博客文章链接。
 
最后编辑: