制作响应式网站教程

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

案例代码可下载(网站底部)

好了,开始教程。

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上查看相关资料,直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <title>山河-响应式网页案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        header {
            background: #FFA500;
        }
        header h1 {
            padding: 30px;
            text-align: center;
        }
        .container {
            max-width: 1135px;
            margin: 10px auto;
            padding: 10px;
            background: #ecf0f1;
        }
        .container ul {
            list-style: none;
            /* 开启弹性盒子 */
            display: flex;  
            /* 位置不够就换行,第一行在上方 */
            flex-wrap: wrap;
            /* 两端对齐,项目之间的间隔都相等 */
            justify-content: space-between;
        }
        .container ul li {
            background: #fff;
            margin: 10px 5px;
            display: flex;
            justify-content: space-between;
            width: 30%;
            height: 30%;
        }
        .container ul li img {
            width: 50%;
            height: 100%;
        }
        footer {
            background: #2E2E2E;
            color: #fff;
            padding: 20px 0;
        }
        footer p {
            text-align: center;
        }
        /* 媒体查询 */
        /* 适配平板端 */
        @media screen and (max-width:770px){
            .container ul {
                width: 90%;
                margin: 0 auto;
            }
            .container ul li {
                width: 48%;
                margin: 10px 0b;
            }
        }
        /* 适配手机端 */
        @media screen and (max-width:480px){
            .container ul {
                width: 90%;
                margin: 0 auto;
            }
            .container ul li {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>山河-响应式网页案例</h1>
    </header>
    <div class="container">
        <ul>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
        </ul>
    </div>
    <footer>
        <p>Copyright © 2021-2022 山河技术分享-山河博客 blog.shanhe.info All Rights Reserved.</p>
    </footer>
</body>
</html>

效果预览图

blog.shanhe.info-wap
适应手机端

blog.shanhe.info-phablet
适应平板端
blog.shanhe.info-pc
PC端

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

文章 © 山河

有问题即可去网站底部找到站长信息联系山河

下载地址三个都是直接下载,下载方式上面的文字可无视。

相关文件下载地址
©下载资源版权归作者所有;如果没有特殊声明,那么此资源就是来源于网络或者用户上传,仅供学习使用,请支持正版,下载后请24小时自行内删除!