HTML+CSS实现响应式布局页面，响应式布局入门教程

AlbertYang

发布于 2021-01-27 11:44:06

14.3K0

发布于 2021-01-27 11:44:06

1 什么是响应式布局？

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天，我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面，手机端再开发一套页面。但是这样做非常麻烦，随着不同的终端越来越多，你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就够了。EthanMarcotte在2010年5月份提出了响应式布局的概念，简而言之，就是一个网站能够兼容多个终端。

开发方式	移动web开发+PC开发	响应式开发
应用场景	一般在已经有PC端的网站，开发移动站的时候，只需单独开发移动端。	针对新建站的一些网站，现在要求适配移动端，所以就一套页面兼容各种终端，灵活。
开发	针对性强，开发效率高。	兼容各种终端，效率低，
适配	只适配移动设备，pad上体验相对较差。	可以适配各种终端
效率	代码简洁，加载快。	代码相对复杂，加载慢。

响应式开发与移动端与PC端分别开发的区别：响应式开发只编写一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。移动端与PC端分别开发，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务器，返回不同的页面。

2 响应式开发的原理？

响应式开发的原理是使用CSS3中的Media Query（媒体查询）针对不同宽度的设备设置不同的布局和样式，从而适配不同的设备。

CSS3 @media 查询定义和使用:

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

例如屏幕宽度小于 500 像素则修改背景颜色(background-color)为红色。

@media screen and (max-width: 300px) {
    body {
        background-color: red;
    }
}

设备的划分情况为：

小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）

但是我们也可以根据实际情况自己定义划分情况。

3 响应式页面开发

3.1 视频

3.2 HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>响应式页面入门教程：Albert Yang</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
    <header>
        <a href="#" class="logo">AlbertYang</a>
        <ul class="navigation">
            <li><a href="#">首页</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">联系我</a></li>
            <li><a href="#">留言板</a></li>
            <li><a href="#">关于我</a></li>
            <li><a href="#">照片墙</a></li>
        </ul>
        <div class="search">
            <input type="text" placeholder="Search">
            <i class="fa fa-search" aria-hidden="true"></i>
        </div>
    </header>
    <div class="banner">
        <div class="content">
            <h2>响应式布局</h2>
            <p>
                响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。
                传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够了。
                响应式设计与自适应设计的区别：响应式开发一套界面，
                通过检测视口分辨率，针对不同客户端在客户端做代码处理，
                来展现不同的布局和内容；自适应需要开发多套界面，
                通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，
                从而请求服务层，返回不同的页面。CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，
                当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
            </p>
            <a href="#">阅读全文</a>
        </div>
        
        <img src="1.jpg" class="image">
    </div>
</body>

</html>

3.3 CSS

/* 清除浏览器默认边距，
使边框和内边距的值包含在元素的width和height内 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 100px;
    z-index: 10;
    background: #5b639c;
}
header .logo {
    position: relative;
    font-size: 1.5em;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
header .navigation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px 0;
}
header .navigation li {
    list-style: none;
    margin: 0 20px;
}
header .navigation li a {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
}
header .navigation li a:hover{
    color: #ffed3b;
}
header .search {
    position: relative;
    width: 300px;
    height: 40px;
}
header .search input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background: transparent;
    outline: none;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 0 10px 0 45px;
}
header .search input::placeholder {
    color: #fff;
}
header .search .fa-search {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    color: #fff;
    border-right: 1px solid #fff;
    padding-right: 10px;
}
.banner {
    background: #eee;
    padding: 200px 100px 100px;
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.banner .content {
    max-width: 1000px;
}
.banner .content h2 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 20px;
}
.banner .content p {
    font-size: 1em;
    color: #333;
}
.banner .content a {
    display: inline-block;
    background: #434978;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 20px;
}
.banner .image {
    max-width: 500px;
    margin-left: 50px;
}
/*屏幕宽度小于991px,改变布局和样式*/
@media screen and (max-width:991px) {
    header {
        padding: 10px 20px;
        flex-direction: column;
    }
    .banner {
        padding: 150px 20px 50px;
        flex-direction: column-reverse;
    }
    .banner .image {
        max-width: 80%;
        margin-left: 0;
    }
    .banner .content h2 {
        font-size: 2em;
    }
}
/*屏幕宽度小于600px,改变布局和样式*/
@media screen and (max-width:600px) {
    header .search {
        width: 100%;
    }
    .banner .image {
        margin-top: 30px;
    }
}

今天的学习就到这里了，视频已经同步到B站，大家可以点击底部的阅读原文直达。如果想继续学习提高，欢迎关注我，每天进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，在看，点赞！！！

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2021-01-17，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自 AlbertYang 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度