响应式实例

最新推荐文章于 2023-05-28 07:46:51 发布
最新推荐文章于 2023-05-28 07:46:51 发布
阅读量1.8k 收藏 13
点赞数 1
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengtingYan/article/details/82933314
版权

效果一、
100%是红色
宽<=980px蓝色
<=580px黑色
<=380px黄色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
源码：

<style>
        /* >980px */
        div{
            width: 100%;
            height: 100px;
            background: red;
        }
        /* <=980px */
        @media screen and (max-width: 980px){
            div{
                background: blue;
            }
        }
        /* <=580px */
        @media screen and (max-width: 580px){
            div{
                background: black;
            }
        }
        /* <=380px */
        @media screen and (max-width: 380px){
            div{
                background: gold;
            }
        }
    </style>
<body>
    <div></div>
</body>

效果二、
在这里插入图片描述
缩小窗口

btn.png用到的图片如上
源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font: 14px/22px "宋体", arial, serif;
        }
        .clearfix::after {
            display: block;
            clear: both;
            content: "";
            height: 0;
            visibility: hidden;
        }
        .navbar {
            margin-top: 80px;
            width: 100%;
            background: #333;
        }
        .nav {
            margin: 0 auto;
            width: 1000px;
            height: 50px;
            position: relative;
        }
        .nav ul {
            list-style: none;
        }
        .nav ul li {
            float: left;
        }
        .nav ul li a {
            display: block;
            line-height: 50px;
            font-size: 16px;
            color: #fff;
            text-decoration: none;
            padding: 0 30px 0 30px;
        }
        .nav ul li:hover a {
            color: #f60;
        }
        .nav ul li.current {
            background: #f60;
        }
        .nav ul li.current:hover a {
            color: #fff;
        }
        .nav .hot {
            display: inline-block;
            margin-left: 20px;
            line-height: 48px;
            position: absolute;
            top: 0;
            right: 0;
        }
        .nav .hot a {
            padding: 0 5px 0 5px;
            font-size: 12px;
            color: #fff;
            text-decoration: none;
        }
        .nav .hot a:hover {
            color: #f60;
            text-decoration: underline;
        }
        .nav .title {
            display: none;
        }
        @media screen and (max-width: 640px) {
            .navbar {
                margin-top: 0;
                background: #444;
            }

            .nav {
                width: auto;
                height: auto;
            }
            #menu {
                display: none;
            }
            .nav ul li {
                margin-top: 1px;
                width: 100%;
                min-width: 100px;
                background: #333;
            }
            .nav .hot {
                display: none;
            }
            .nav .title {
                display: block;
                width: 100%;
                height: 50px;
                background: #333;
                text-align: center;
                font: normal 20px/35px "Microsoft YaHei", arial, serif;
                letter-spacing: 2px;
                position: relative;
            }
            .nav .title a {
                color: #f60;
                text-decoration: none;
                line-height: 50px;
            }
            .nav .title .btn {
                position: absolute;
                right: 10px;
                top: 8px;
                width: 34px;
                height: 34px;
                background: url(btn.png) center center no-repeat;
                cursor: pointer;
            }
        }
    </style>
</head>
<body>
    <div class="navbar" class="clearfix">
        <div class="nav">
            <h1 class="title">
                <a href="#">风驰网</a>
                <span class="btn"></span>
            </h1>
            <ul id="menu">
                <li class="current">
                    <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>
                <li>
                    <a href="#">公开课</a>
                </li>
            </ul>
            <p class="hot">
                <a href="#">钢铁侠3</a>
                <a href="#">中国合伙人</a>
                <a href="#">盛夏晚晴天</a>
                <a href="#">陆贞传奇</a>
            </p>

        </div>
    </div>
    <script>
        var menu = document.querySelector("#menu");
        var title = document.querySelector(".title");
        title.addEventListener("click", function () {
            menu.style.display = menu.style.display == "block" ? "none" : "block";
        })
    </script>
</body>
</html>

实例三、
效果：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
源码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片库</title>
    <style>
        /* CSS初始化 reset.css normalize 
        各大网站的初始化代码：
        https://www.cnblogs.com/liumobai/p/5005623.html

        reset.css
        https://meyerweb.com/eric/tools/css/reset/

        normalize.css(推荐使用)
        https://necolas.github.io/normalize.css/
        */

        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
        }
        header {
            height: 60px;
            line-height: 60px;
            background-color: black;
            color: white;
            text-align: center;
        }
        main {
            margin: 5px;
            display: flex;
            flex-wrap: wrap;
        }
        img {
            margin: 5px;
            /* 100%指父元素main的宽度，40px指每个图片左右外边距之和 */
            width: calc((100% - 40px) / 4);
        }
        /* 媒体设备，all,screen等和操作符可省略，直接写判断
        设备宽度<=1150px
        */
        @media all and (max-width:1150px) {
            img {
                width: calc((100% - 30px) / 3);
            }
        }
        @media (max-width:770px) {
            img {
                width: calc((100% - 20px) / 2);
            }
        }
        @media (max-width:520px) {
            img {
                margin: 2.5px;
                width: calc((100% - 5px));
            }
            main {
                margin: 2px;
            }
        }
    </style>
</head>

<body>
    <header>图片库</header>
    <main>
        <img src="images/1.jpg" alt="">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
        <img src="images/5.jpg" alt="">
        <img src="images/6.jpg" alt="">
        <img src="images/7.jpg" alt="">
        <img src="images/8.jpg" alt="">
        <img src="images/9.jpg" alt="">
        <img src="images/10.jpg" alt="">
        <img src="images/11.jpg" alt="">
        <img src="images/12.jpg" alt="">
        <img src="images/13.jpg" alt="">
        <img src="images/14.jpg" alt="">
        <img src="images/15.jpg" alt="">
        <img src="images/16.jpg" alt="">
        <img src="images/17.jpg" alt="">
        <img src="images/18.jpg" alt="">
        <img src="images/19.jpg" alt="">
        <img src="images/20.jpg" alt="">
    </main>
</body>
</html>

图片自行找吧

用到的媒体查询不懂的可以参考
CSS长度单位 和 CSS响应式（媒体查询）

宝儿的程序生涯
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
响应式布局实例
09-23
css3中响应式布局的案例,新手们可以参考噢！
六个响应式布局案例
m0_58467275的博客
05-15 712
响应式布局案例分析，内含弹性布局使用
简单的响应式页面小示例
weixin_34387284的博客
03-29 292
2019独角兽企业重金招聘Python工程师标准>>> ...
精通 CSS 第 8 章 响应式布局 学习案例
GoldenaArcher的博客
05-08 619
精通 CSS 第 8 章 响应式布局 学习案例 响应式的学习案例总共做了 3 个，一个是 flex 的响应式，还有两个是将之前在 精通 CSS 第 7 章学习笔记（上） 和 精通 CSS 第 7 章学习笔记（下） 中做的两个案例转化为响应式。 flexbox 的响应式 flexbox 好像是没有媒体查询（media query）——至少书上是这么说的。不过 flexbox 本身就有自适应的特效，对于很多不以屏幕尺寸不敏感，而对元素盒子尺寸更加敏感的内容就比较友好了。 文中的例子是一个类似购物车中的商品模式，
在固定框高内图片剧中显示，不变形
12-05 479
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...
CSS响应式设计——（视口/网格视图/媒体查询/图像/视频）看这一篇就够了
Vec_Kun的博客
02-02 1077
响应式 web 设计会让我们的网页在所有设备上运行良好。响应式 web 设计仅使用 HTML 和 CSS。响应式 web 设计并不是程序或 JavaScript。视口（viewport）是用户在网页上的可见区域。视口随设备而异，在移动电话上会比在计算机屏幕上更小。在平板电脑和手机之前，网页仅设计为用于计算机屏幕，并且网页拥有静态设计和固定大小是很常见的。然后，当我们开始使用平板电脑和手机上网时，固定大小的网页太大了，无法适应视口。
bootstrap响应式表格实例详解
08-30
主要为大家详细介绍了bootstrap响应式表格的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
响应式的实例
05-15
这是响应式网站的Demo，可以作为学习响应式的参考
响应式布局的简单案例
09-24
下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
Bootstrap 响应式实用工具实例详解
08-31
Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。下面通过本文给大家分享Bootstrap 响应式实用工具，一起看看吧
响应式页面案例
03-29
一个使用了bootstrap框架，同时使用了less的案例，实现了简单的响应式页面效果
响应式完整网站案例+源码
03-22
插件描述：完整的网站前端+源码，各种控件功能齐全，最适合入门者. 参考示例：http://www.jq22.com/jquery-info6300
响应式布局以及几个小案例
weixin_44356372的博客
05-16 819
1、什么是媒体查询？ 概念：为不同尺寸的屏幕设定不同的CSS样式 用法：@media screen and (min-device-width:100px) and (max-device-width:300px){} 意为设备屏幕宽度100px到300px之间的使用 @media的常用参数 width、height 浏览器宽度和高度 device-width 设备屏幕的宽度 device-height 设备屏幕的高度 2、flex弹性布局 Flex 是 Flexible Box 的缩写，意为"弹
响应式布局案例分享
weixin_44997264的博客
11-15 2522
前言 随着互联网时代的发展，用户对布局有了一个新的要求，大气，美观，能够在不同的设备上呈现令人焕然一新的效果。此时，一个全新的概念—响应式布局应运而生。它的诞生为我们的移动端布局带来了很大的便利性，因此学习响应式的布局已经是势在必行的形式了 一、响应式布局是什么？ 其实个人通俗点来说它就是兼容pc端和移动端的一种布局，它能更直观的去给用户呈现一个界面，让用户良好的体验， 1.viewport viewport 是用户网页的一个可视化区域。手机浏览器是把页面放在一个虚拟的"窗口（vie...
[CSS案例二]—实现一个响应式网页，兼容PC移动端，ScrollReveal 增加动画
小张Python
05-28 985
大家好，我是小张本期案例，用前端三件套实现一个简约的响应式布局网页，当屏幕分辨率自适应改变时网页布局会自动发生切换，网页布局同时兼容PC端和移动端，在普通PC屏幕下网页布局效果移动端网页布局：除了基础布局外，借助插件，在网页中加入了一些动画，例如网页首次打开时，左侧图标 由左向右 延迟 500ms 出现，透明度从 100 到 0;中间 标题和图片 由下向上延迟 400ms 出现，透明度从 100 到 0;
响应式编程介绍
老男孩的架构路
01-10 2606
我之前替换过这些组件，且不说替换之后的很多隐藏的问题，就查询处理性能效果来说，并没有发生多大的改变，后来我才明白，就像刚开始提的，一个响应式的系统要求系统中各个部分都需要响应式的提供服务，而不是某个组件，一条响应式链路中某个节点如果只能同步阻塞，那么这条链路他就不是响应式的，由此带来的问题就是改造一个现有的系统为响应式，那将是一个巨大的灾难。最为关注的 jdbc 也有对应的支持了，r2dbc.io/ （Reactive 本来不支持 JDBC，最根本的原因是，JDBC 不是 non-blocking 设计）
大二学生基于Html+Css+javascript的网页制作——动漫设计公司响应式网站模板 (10个页面)
qq_38518191的博客
05-09 904
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
一个简单的响应式博客网页
yue200403的博客
06-28 509
使用React搭建一个简单的响应式博客Demo；博客页面包含三个部分，头部，主体内容和底部；页面为响应式，可根据不同的设备环境进行相应布局。主要知识点，react开发，Html和CSS基础。
十款经典响应式网页设计案例欣赏[转CSDN]
weixin_30731305的博客
02-02 1436
导读：一个固定格式设计的网页，在用屏幕大小不同的设备或不同浏览器打开时，是否会感觉“凌乱”呢？其实，解决 办法早已出现，响应式网页设计应运而生，它的理念是：页面的设计与开发应根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调 整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，页面都应该能...
pinia解构数据响应式
最新发布
04-04
Pinia是一个基于Vue 3的状态管理库，它提供了一种解构数据响应式的方式。Pinia的核心概念是使用store来管理应用程序的状态，并通过响应式的方式将状态与组件进行绑定。 Pinia的解构数据响应式主要有以下几个特点： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值