002 小案例 响应式布局 媒体查询

最新推荐文章于 2024-01-20 22:10:58 发布
最新推荐文章于 2024-01-20 22:10:58 发布
阅读量168 收藏
点赞数
分类专栏： html & CSS 小案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Twelve_Y/article/details/118966319
版权

1.使用媒体查询
2.flex布局
3.vm、vh的使用

<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul,ol {
            list-style: none;
        }
        /* 以上公共部分 */
        /* 一下媒体查询 */
        /* PC端 960px以上的媒体查询 */
        /* @media screen and (min-width:960px) {  可以简写 */
        @media (min-width:960px) {
            .part .head {
                height: 100px;
                width: 100%;
                background-color: red;
            }
            /* PC端center  */
            .middle .center {
                width: 1000px;
                margin: 0 auto;
                display: flex;
                flex-flow: row wrap;
                justify-content: space-between;
            }
            .middle .center>div{
                width: 320px;
                height: 400px;
                margin-top: 20px;
            }
            .middle .center>div:nth-child(1) {
                background-color: purple;
            }
            .middle .center>div:nth-child(2) {
                background-color: blue;
            }
            .middle .center>div:nth-child(3) {
                background-color: pink;
            }
            .middle .center>div:nth-child(4) {
                background-color: green;
            }
            .middle .center>div:nth-child(5) {
                width: 660px;
                background-color: orange;
            }
        }

        /* 手机端  500px 以下的媒体 */
        @media screen and (max-width:500px){
            .part .head {
                width: 100vw;
                height: 8vh;
                background-color: red;
                margin-bottom: 2vw;
            }
            /* 全屏宽度 可以预留两边的空间*/
            .part .center {
                width: 96vw;
                margin: 0 auto;
                display: flex;
                flex-flow: row wrap;
                justify-content: space-between;
            }
            .d1,.d4,.d5 {
                width: 100%;
                height: 20vh;
                margin-bottom: 2vw;
            }
            .d2,.d3 {
                width: 47vw;
                height: 25vh;
                margin-bottom: 2vw;
            }
            .middle .center>div:nth-child(1) {
                background-color: purple;
            }
            .middle .center>div:nth-child(4) {
                background-color: green;
            }
            .middle .center>div:nth-child(5) {
                background-color: orange;
            }
            .middle .center>div:nth-child(2) {
                background-color: blue;
            }
            .middle .center>div:nth-child(3) {
                background-color: pink;
            }
        }
    </style>
</head>
<body>
    <div class="part">
        <div class="head"></div>
        <div class="middle">
            <div class="center">
                <div class="d1"></div>
                <div class="d2"></div>
                <div class="d3"></div>
                <div class="d4"></div>
                <div class="d5"></div>
            </div>
        </div>
    </div>
   
</body>
</html>

效果：
1.移动端模拟效果
在这里插入图片描述
2. PC端效果
在这里插入图片描述

nine-seven
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
媒体查询响应式布局菜单案例
lucky_kundy的博客
04-27 927
创建顶部菜单，当可视窗口小于414时原菜单将会消失出现小菜单，点击小菜单会出现和之前一样的菜单选项，并且扩大可视窗口后小菜单会消失
用媒体查询实现响应式布局
chihuomiao的博客
04-14 5602
@media空格设备类型 {元素{属性：值;}} screen表示电子屏幕 print表示打印机屏幕 所有设备使用媒体查询可以用@media all @media空格and空格（你想要加的条件）{元素{属性：值;}} 常见的条件有max-width表示小于等于这个宽度的时候做什么 min-width表示大于等于这个宽度的时候做什么 条件是可以叠加的哇，记住and的左右都有空格哦 设置color颜色时要注意，颜色是可以被body里面的子元素继承的 但是如果子元素有自己的颜色，就会使用自己的...
响应式布局以及几个小案例
weixin_44356372的博客
05-16 839
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 的缩写，意为"弹
响应式布局--媒体查询
qq_30351747的博客
11-11 1489
响应式布局--媒体查询
响应式布局 —— 媒体查询
qq_69444691的博客
04-26 647
1.视口响应式网页设计是采用CSS的媒体查询技术，将三种已有的开发技巧，包括弹性网格布局、弹性图片、媒体和媒体查询整合在一起，命名为响应式网页设计
响应式布局小案例
01-07
在HTML5中，响应式布局主要依赖于以下三个核心元素：媒体查询（Media Queries）、流式布局（Fluid Grids）和弹性图片（Flexible Images）。 1. **媒体查询**：媒体查询是CSS3中的一个重要特性，它允许内容根据设备...
响应式布局
02-21
响应式布局的核心在于使用媒体查询（Media Queries）、弹性网格布局（Flexible Grid）、流式布局（Fluid Layout）以及自适应图像（Responsive Images）等技术。以下是对这些关键概念的详细解释： 1. **媒体查询**：...
响应式网页布局-仿三星官网首页
09-01
在设计响应式布局时，可以利用Flexbox的灵活性来创建可伸缩的导航栏、内容区域和页脚，使它们能在不同设备上自动调整。 4. **栅格系统(Grid System)**：栅格系统基于行和列的概念，帮助设计师创建有组织的布局。在...
响应式布局案例
03-06
响应式布局的核心理念在于“流体布局”（Fluid Grid）、“媒体查询”（Media Queries）和“灵活图像”（Flexible Images），这三者共同构建了适应各种屏幕尺寸的能力。 1. 流体布局：流体布局是一种基于百分比而非...
css3 响应式媒体查询的示例代码
12-03
CSS3中的媒体查询是实现响应式网页设计的关键技术。它允许开发者根据设备的特性，如视口宽度、设备像素比等，应用不同的样式规则。在响应式设计中，媒体查询通常用于确保页面在各种设备上（包括桌面、平板电脑、手机...
媒体查询实现响应式布局
u011848617的专栏
01-22 3195
本文主要介绍 @media 查询的使用。通过媒体查询，在不同的屏幕尺寸下，可以设置不同的样式。以此，可以完美解决不同屏幕适配的问题。话不多说，先来看看效果： CSS @media screen and (max-width: 400px) { .btn { background-color: lightblue; } } @media screen and (min-width...
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
weixin_33968104的博客
06-20 1815
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 px和视口 媒体查询 百分比 自适应场景下的rem解决方案 通过vw/vh来实现自适应 一、px和视口 在静态网页中，我们经常用像...
CSS@media媒体查询，实现简单的响应式布局
捕鱼麦大叔的博客
03-07 1万+
页面相应式要求如下：代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;响应式布局练习&lt;/title&gt; &lt;style&gt; /*基本样式*/
响应式布局之媒体查询法
大佐
06-29 376
响应式不同分辨率设置 1.1024px显屏 @media screen and (max-width : 1024px) { /* 样式写在这里 */ }2.800px显屏 @media screen and (max-width : 800px) { /* 样式写在这里 */ } 3.640...
CSS3之媒体查询（响应式布局）
热门推荐
qq_35401191的博客
09-02 3万+
为啥有媒体查询： 移动设备的快速普及完全颠覆了Web设计领域。 用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。 Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错。（说白了就是不同大小显示器web适配问题。CSS2中也有媒体查询，CSS3在此基础更加丰满） 什么是媒体查询：...
CSS媒体查询
fqq_5280的博客
01-27 532
CSS媒体查询 使用媒体查询，可以针对不同的媒体类型定义不同的样式。 如果希望做出响应式的页面，@media是身份必要的。 语法 @media mediatype and|not|only (media feature) { CSS-Code; } 你也可以针对不同的媒体使用不同stylesheets（css2） &lt;link rel="stylesheet" media="medi...
前端学习第16天：媒体查询-响应式布局
QAmazing的博客
08-15 276
第16天 1.媒体查询 ​ 说明：媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width 、 height 和color（等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 1.1媒体查询操作方式 ​ 实际操作为：...
媒体查询响应式布局&grid布局
最新发布
weixin_73838148的博客
01-20 1064
em,rem控制字体，分别相对于父元素和根元素vh,vw控制盒子，相对于视窗，不依赖于父元素依赖于父元素语法示例：and表示逻辑与逗号表示逻辑或not表示逻辑非可以通过媒体查询来控制根元素（html）字号：从上到下，范围应该逐个变小，也就是越往上范围越大。
响应式布局：媒体查询与导航案例
总结来说，响应式布局是通过媒体查询调整布局策略，确保网站在不同设备上的适应性和可用性。理解并掌握如何设置响应式容器、运用媒体查询以及调整导航结构，对于构建现代网页至关重要。通过灵活的设计和合理的代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值