CSS@media媒体查询，实现简单的响应式布局

最新推荐文章于 2024-05-31 09:06:51 发布
最新推荐文章于 2024-05-31 09:06:51 发布
阅读量1.1w 收藏 23
点赞数 8
文章标签： html css @media 媒体查询 响应式布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41754739/article/details/79470692
版权

页面相应式要求如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式布局练习</title>
    <style>
        /*基本样式*/
        body {
            margin: 0;
            padding: 0;
            background-color: #ddd;
        }
        .side {
            height: 300px;
            background-color: #4eb3b9;
        }
        .main {
            height: 300px;
            background-color: #ff0097;
        }
        /*device-width: >= 1000px*/
         @media screen and (min-width: 1000px) {
            .parent {
                width: 960px;
                margin: 0 auto;
            }
            .side {
                width: 300px;
                height: 300px;
                background-color: #4eb3b9;
                float: left;
            }
            .main {
                width: 650px;
                height: 300px;
                margin-left: 10px;
                background-color: #ff0097;
                float: left;
            }
         }
        /*device-width:400px-1000px*/
        @media screen and (min-width: 400px) and (max-width: 1000px) {
            .parent {
                display: flex;
            }
            .side {
                width: 300px;
            }
            .main {
                flex: 1;
                margin-left: 10px;
            }
        }
        /*device-width: <= 400px*/
        @media screen and (max-width: 400px) {
            .parent {
                display: flex;
                flex-flow: column wrap;
            }
            .side {
                flex: 1;
                margin-bottom: 10px;
            }
            .main {
                flex: 1;
            }
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="side"></div>
        <div class="main"></div>
    </div>
</body>
</html>

捕鱼麦大叔
关注
  • 8
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中响应式布局媒体查询(@media)
XinKun的博客
11-11 555
一、响应式布局 响应式布局 网页可以根据不同的设备或黄口大小呈现出不同的效果 使用响应式布局，可以使一个网页适用于所有设备 响应布局的关键是媒体查询 通过媒体查询可以为不同的设备，或设备不同状态来分别设置样式 二、媒体查询（@media） 使用媒体查询 语法：@media 查询规则{} 媒体类型: all 所有设备 print 打印设备
@media媒体查询实现简单响应式页面.rar
08-23
响应式网页设计是一种让网页在不同设备上呈现良好效果的...通过不断实践和优化，我们可以创建出更加复杂和精细的响应式布局，以满足各种用户需求。下次忘记如何使用`@media`时，这样的简单示例确实是个不错的参考点。
css 响应式布局-媒体查询
weixin_43294560的博客
06-22 354
在style上添加属性 media='screen' 屏幕设备上有效 media='print' 打印机上有效 media='print,screen' media='all' 所有设备 若是外部css文件 在link上添加属性 media='screen' 屏幕设备上有效 media='print' 打印机上有效 media='print,screen' media='all' 内部css文件引入 @import url(xx.css) print; @import url
媒体查询详解
jieyucx的博客
08-01 6006
总的来说，媒体查询是CSS3中强大的一个功能，它能够让我们根据不同的设备特性来应用不同的样式，从而实现了响应式网页设计的基础。通过本文的详细解读，我们应该明白了如何利用媒体查询来对移动设备、桌面设备、不同分辨率的设备进行样式的调整。希望本文能对你理解和使用媒体查询提供帮助，也希望你能在实际项目中灵活运用，打造适配各种设备的优秀网页设计。在未来的网页设计道路上，他会是你的重要伙伴。
CSS @media 媒体查询全解：打造极致跨平台页面的动态户体体验
最新发布
JINGWHALE
05-31 1104
随着互联网设备的多样化和用户浏览习惯的变化，现代网页设计越来越注重提供跨平台、跨设备的无缝用户体验。CSS媒体查询@media在此背景下扮演着至关重要的角色，它赋予网页设计者精准控制网页样式的能力，使之能随设备环境变化而动态调整，从而打造出高度适应性和互动性的页面体验。本文将深入探讨如何运用@media媒体查询来创造流畅且响应迅速的动态页面。
CSS进阶之移动端适配 (四)：媒体查询、CSS常见单位、深入理解pixel、DPR、PPI、浏览器视口Viewport、移动端适配rem方案、移动端适配vw方案
Good Good Study,Day Day Up!
06-06 9099
是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。可以让我们根据设备的类型（比如：屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改页面@media@importurlmedia属性, , 和其他HTML元素指定特定的媒体类型。
响应式需要的技术
jijsn的博客
08-16 385
响应式需要的技术
媒体查询及使用
m0_59225791的博客
02-11 6779
媒体查询(Media Query)是CSS3新语法。媒体查询可以根据当前显示设备的特性(如： 视口宽度, 屏幕比例，设备显示方向)为其添加css样式， 使用媒体查询可以在不改变页面内容的情况下为特定的设备显示特定的样式。如果没有媒体查询就不能。媒体查询能够帮助我们更方便的判断当前设备特性（视口宽度等），更方便的针对视口设置合适的样式。总之：媒体查询可以让网页适应多个终端。
css3 media 响应式布局的简单实例
09-24
CSS3中的媒体查询（Media Queries）是实现响应式布局的关键工具。通过媒体查询，我们可以根据设备的特定特性，如视口宽度、设备像素比等，来定义不同的样式规则。 在给定的实例中，`@media` 规则被用来根据屏幕宽度...
使用CSS媒体查询创建响应式布局教程
01-19
现如今在Web前端领域，BootStrap是一个最流行的UI库，其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式。 追究Bootstrap的内在原理，其实就是通过媒体查询来完成对不同屏幕大小、不同分辨率、不同...
css基于媒体查询和 rem 的响应式布局实践
12-29
我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验，CSS 给我们提供了一个强大的条件判断语法，可以根据设备的宽度来设置不同的样式，从而实现不同的设备应用不同的布局。 下图展示了利用 @media ...
JS中使用media实现响应式布局
12-04
在JavaScript中，我们通常结合CSS的`@media`查询来实现响应式布局，虽然主要工作是由CSS完成，但JS也可以辅助处理一些动态响应的需求。以下是关于使用`@media`在JS中实现响应式布局的详细讲解。 1. CSS `@media`...
媒体查询（media query）总结
qq_51099065的博客
08-22 2157
媒体查询是css3新语法，可以针对不同的媒体类型定义不同的样式，可简单理解为根据页面不同的宽度，来使用不同的css样式。
css之媒体查询
weixin_43465508的博客
04-03 8107
因为移动端的尺寸不同,但是，在移动端屏幕上显示的元素的大小是相同的元素的尺寸大小，要根据屏幕尺寸的大小发生变化媒体类型（media types）描述设备的一般类别媒体特性描述了 user-agent输出设备 或是浏览器环境的具体特征。
CSS-13 媒体查询使用方式；CSS绝对单位|相对单位|像素|DPR和PPI；CSS预处理器LESS、Sass和Scss
qq_54075517的博客
05-09 1416
媒体查询使用方式；媒体类型；媒体特性；逻辑操作符；常见移动端设备；CSS绝对单位；相对单位；像素；DPR和PPI;CSS预处理器Less及其语法、Sass和Scss
css 媒体查询
技术的搬运工
01-03 8012
CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用，例如“视口宽于 480 像素”的时候。媒体查询是响应式 Web 设计的关键部分，因为它允许你按照视口的尺寸创建不同的布局，不过它也可以用来探测和你的站点运行的环境相关联的其它条件，比如用户是在使用触摸屏还是鼠标。
媒体查询的使用
li_chun_can的博客
08-19 3221
定义 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 媒体查询与弹性盒布局的适用情况 媒体查询：当页面的结构发生变化的话最好使用媒体查询。 弹性盒：如果只是宽高的变化，尽量使用弹性盒。 使用方法 <!-- link元
媒体查询？
weixin_65607135的博客
09-14 1251
浏览器在宽度小于540px的时候，背景颜色是蓝色，浏览器宽度在540px-970px之间，body的背景颜色是绿色，浏览器宽度大于970px的时候，背景颜色是红色。rem单位是跟着html来走的，有了rem页面元素可以设置不同的大小尺寸。媒体查询+rem就可以实现不同设备宽度，实现元素大小的动态变化。使用@media查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式。媒体查询可以根据不同的屏幕尺寸改变不同的样式。3.关键字 and not only。
【网页设计】35：媒体查询
https://blog.csdn.net/m0_74834215
03-18 1063
可以看到div标签的样式在随浏览器窗口宽度变化而变化，从style1变化到style3，这就是响应式的原理。响应式开发原理：使用媒体查询media针对不同宽度的设备进行布局和样式的设置，从而达到适配不同设备的目的。响应式概念：一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。自适应概念：多套页面适配不同终端，网页自适应显示在不同大小的终端设备上。
媒体查询实现页面响应式布局介绍
04-03
媒体查询是一种CSS3技术，它可以根据不同的设备参数（如屏幕宽度、高度、方向等）来应用不同的CSS样式，从而实现响应式布局。 媒体查询的语法格式如下： @media mediatype and (expression) { /* CSS rules to apply */ } 其中，mediatype是设备类型，如screen表示屏幕设备，print表示打印设备等；expression是一种条件表达式，用于判断设备参数是否满足条件；CSS rules to apply是要应用的CSS样式。 通过媒体查询，我们可以针对不同的设备类型和参数，为页面应用不同的CSS样式，从而实现页面的响应式布局。例如，可以为不同的屏幕宽度应用不同的CSS样式，使页面在不同尺寸的设备上都能呈现出最佳的效果。 总之，媒体查询是实现响应式布局的重要技术手段，它可以让我们为不同的设备类型和参数定制不同的CSS样式，从而让页面在不同设备上都能呈现出最佳的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值