css响应式布局

最新推荐文章于 2024-04-23 17:13:57 发布
最新推荐文章于 2024-04-23 17:13:57 发布
阅读量1k 收藏
点赞数 1
分类专栏： 前端 html css 文章标签： css 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43548590/article/details/131192778
版权
前端 同时被 3 个专栏收录
39 篇文章 1 订阅
订阅专栏
css
5 篇文章 0 订阅
订阅专栏
html
2 篇文章 0 订阅
订阅专栏

这里写自定义目录标题

1.效果展示

在这里插入图片描述

2.使用grid布局

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>文档标题</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            gap: 10px 10px;
        }

        .item {
            padding: 10px;
            overflow: auto;
            border-width: 1px;
            border-color: black;
        }

        .cover {
            position: relative;
            width: 100%;
            padding-bottom: 66%;
        }

        .cover img {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .info {
            padding-top: 10px;
        }
        @media screen and (max-width: 960px) {}

        @media screen and (max-width: 1024px) {
            .container {}
        }

        @media screen and (max-width: 768px) {
            .container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media screen and (max-width: 400px) {
            .container {
                grid-template-columns: repeat(1, 1fr);
            }
        }

        .color-1 {
            background-color: aqua;
        }

        .color-2 {
            background-color: blue;
        }

        .color-3 {
            background-color: blueviolet;
        }

        .color-4 {
            background-color: brown;
        }

        .color-5 {
            background-color:greenyellow;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item color-1">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                </div>
            </a>
            <div class="info">
                <div class="title">这是一节英语课2</div>
                <div class="subtitle">1 chaper | 2 videos</div>
                <div class="price">i100AUD</div>
            </div>
        </div>
        <div class="item color-2">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
                </div>
            </a>
            <div class="info">
                <div class="title">这是一节英语课2</div>
                <div class="subtitle">1 chaper | 2 videos</div>
                <div class="price">i100AUD</div>
            </div>
        </div>
        <div class="item color-3">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
                </div>
            </a>
            <div class="info">
                <div class="title">这是一节英语课2</div>
                <div class="subtitle">1 chaper | 2 videos</div>
                <div class="price">i100AUD</div>
            </div>
        </div>
        <div class="item color-4">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
                </div>
            </a>
            <div class="info">
                <div class="title">这是一节英语课2</div>
                <div class="subtitle">1 chaper | 2 videos</div>
                <div class="price">i100AUD</div>
            </div>
        </div>
        <div class="item color-5">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
                </div>
            </a>
            <div class="info">
                <div class="title">这是一节英语课2</div>
                <div class="subtitle">1 chaper | 2 videos</div>
                <div class="price">i100AUD</div>
            </div>
        </div>
        <div class="item color-1">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
                </div>
            </a>
            <div class="info">
                <div class="title">这是一节英语课2</div>
                <div class="subtitle">1 chaper | 2 videos</div>
                <div class="price">i100AUD</div>
            </div>
        </div>
    </div>
    
</body>

</html>

3.使用flex布局

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>文档标题</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            display: flex;
            flex-wrap: wrap;
        }

        .item {
            display: block;
            flex: 0 0 auto;
            width: 25%;
        }

        .cover {
            position: relative;
            width: 100%;
            padding-bottom: 100%;
        }

        .cover img {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .info {
            padding-top: 10px;
        }

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

        @media screen and (max-width: 1024px) {
            .item {
                width: 50%;
            }
        }

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

        @media screen and (max-width: 400px) {
            .item {
                width: 100%;
            }
        }

        .color-1 {
            background-color: aqua;
        }

        .color-2 {
            background-color: blue;
        }

        .color-3 {
            background-color: blueviolet;
        }

        .color-4 {
            background-color: brown;
        }

        .color-5 {
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item color-1">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                </div>
            </a>
            <div class="info">
                <div class="title">这是一节英语课2</div>
                <div class="subtitle">1 chaper | 2 videos</div>
                <div class="price">i100AUD</div>
            </div>
        </div>
        <div class="item color-2">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                </div>
            </a>
            <div class="info">
                <div class="title">这是一节英语课2</div>
                <div class="subtitle">1 chaper | 2 videos</div>
                <div class="price">i100AUD</div>
            </div>
        </div>
        <div class="item color-3">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                </div>
            </a>
            <div class="info">
                <div class="title">这是一节英语课2</div>
                <div class="subtitle">1 chaper | 2 videos</div>
                <div class="price">i100AUD</div>
            </div>
        </div>
        <div class="item color-4">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                </div>
            </a>
            <div class="info">
                <div class="title">这是一节英语课2</div>
                <div class="subtitle">1 chaper | 2 videos</div>
                <div class="price">i100AUD</div>
            </div>
        </div>
        <div class="item color-5">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                </div>
            </a>
            <div class="info">
                <div class="title">这是一节英语课2</div>
                <div class="subtitle">1 chaper | 2 videos</div>
                <div class="price">i100AUD</div>
            </div>
        </div>
        <div class="item color-1">
            <a href="javascript:void(0)">
                <div class="cover">
                    <img src="" alt="">
                </div>
            </a>
            <div class="info">
                <div class="title">这是一节英语课2</div>
                <div class="subtitle">1 chaper | 2 videos</div>
                <div class="price">i100AUD</div>
            </div>
        </div>
    </div>

</body>

</html>
落魄实习生
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css怎么做响应式布局,用CSS实现响应式布局
weixin_34226447的博客
08-03 4660
响应式网页看起来高大上，但实际上，不用JS只用CSS也能实现响应式网站的布局要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用使用@media 的三种方式第一： 直接在CSS文件中使用@media 类型 and (条件1) and (条件二){css样式}@media screen and (max-width:980px ) {body{background-color: red;}}第二...
html + css响应式布局
09-18
供参考
CSS响应式布局
宝子的博客
01-10 964
实现思路：一般都是先实现PC端页面，然后再去做其他设备的兼容设置宽度时，最好不要写死(px)，而是用%单位参照父元素的大小设置最外层容器时，用vw, vh作单位不同设备需要换行显示时，使用flex-direction:columns;导航条一定条件下，显示隐藏内边距和外边距还有高度可以适当的用px单位媒体查询时，主要的改变有：换行显示、隐藏，其余都是小改动，比如font-size, margin等等。
CSS响应式布局（自适应布局）
weixin_65607135的博客
09-15 1万+
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
CSS响应式布局（网页如何根据不同尺寸调整状态）
最新发布
百赢出品，必属精品
04-23 2017
使用相对单位（如百分比）而不是固定单位（如像素）来定义网页元素的大小和位置，使得页面布局能够自适应不同的屏幕尺寸。使用 CSS3 中的媒体查询功能，根据设备特性（如屏幕宽度、设备方向等）应用不同的 CSS 样式，以适配不同的设备。使用可伸缩的图片格式（如矢量图形或使用 CSS 来调整图像大小），以确保图片能够在不同分辨率的屏幕上显示清晰。页面元素的宽度会随着视口大小的改变而自动调整，以适应不同的屏幕尺寸。媒体查询(Media Queries)：媒体查询允许你针对设备的不同特性定义不同的样式。
css实现响应式布局
CYL_2021的博客
04-17 8190
一.什么是响应式布局 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够了。响应式设计与自适应设计的区别:响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容;自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。cSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏
用CSS实现响应式布局
皮一下很开心的猴头
07-30 3万+
响应式网页看起来高大上，但实际上，不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一： 直接在CSS文件中使用 @media 类型 and (条件1) and (条件二) { css样式 } @media screen and (max-width:980px ) { body{ backgr...
HTML+CSS十分钟实现响应式布局页面，响应式布局实战教程
热门推荐
AlbertYang的博客
01-17 4万+
承蒙各位小伙伴的支持，鄙人有幸入围了《CSDN 2020博客之星》的前200名，现在进入投票环节，如果我平时写的文章和分享对你有用的话，请每天点击一下这个链接，投上你们宝贵的一票吧！谢谢！❤️ 每一票都是我坚持的动力和力量！https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743 作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领...
css-响应式布局
Cswan的博客
01-24 937
一、响应式布局概念 定义： 响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。 核心思想：响应式布局的目的不是让一个网页的布局比例在任何设备都显示得完全一样，而是让网页在各个设备中都能正常且比较舒服地显示，不影响用户的阅读体验。换言之，首要的任务是不影响用户的正常阅读和正常操作，而一些比较次要的诸如内容两边的留白，大面积的背景图，导航键之间的间距比例
盘点：CSS响应式布局的5种实现方式
艾编程带你学前端博客
12-01 1154
响应式布局：只需要开发一套代码，只需要一套代码使页面适应不同的屏幕。响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；
project13_HTMLCSS响应式布局_
10-04
用html css 编写的一个网页的响应式布局 根据窗口大小进行规格变化
自适应屏幕的CSS响应式布局设计技巧总结
09-24
主要介绍了自适应屏幕的CSS响应式布局设计技巧总结,响应式设计是现在移动端页面开发的热门话题,需要的朋友可以参考下
响应式布局参考css文件
10-09
响应式布局参考css文件
Vue之xlsx的使用
qq_43548590的博客
10-09 9553
Vue之xlsx的使用
onlyoffice集成实现编辑预览
qq_43548590的博客
04-04 8152
ONLYOFFICE 文档开发者版ONLYOFFICE Docs 是一款功能强大的在线编辑器，适用于文本文档、电子表格、演示文稿和表格。创建复杂的文档、专业的电子表格和令人惊叹的演示文稿。支持的常用 Office 和文档格式：docx、xlsx、pptx、odt、ods、odp、doc、xls、ppt、pdf、txt、rtf、html、epub、csv。完全兼容 OOXML(Office Open XML)格式。使您的用户能够在您自己的应用程序中在浏览器中在线编辑、共享和协作处理文档。
vite中加载使用svg
qq_43548590的博客
12-27 7561
vite中加载使用svg使用vite-plugin-svg-icons插件安装 (yarn or npm)添加配置创建svg组件全局导入页面中使用 使用vite-plugin-svg-icons插件 安装 (yarn or npm) yarn add vite-plugin-svg-icons -D or npm i vite-plugin-svg-icons -D 添加配置 在vite.config.js中配置插件 在这里插入代码片import viteSvgIcons from 'vite-plugi
vue图片压缩image-conversion
qq_43548590的博客
08-31 6779
vue图片压缩image-conversion
vue使用图像编辑器tui-image-editor
qq_43548590的博客
08-30 6388
vue使用图像编辑器tui-image-editor
css响应式布局怎么用
05-24
CSS响应式布局是通过使用媒体查询（media queries）来适应不同的屏幕尺寸和设备类型。以下是实现CSS响应式布局的一些常见方法： 1. 使用相对单位：使用相对单位（如em、rem、%等）来设置元素的大小和位置，这样可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值