使用CSS的@media screen 规则为不同的屏幕尺寸设置不同的样式(响应式图片布局)

这篇具有很好参考价值的文章主要介绍了使用CSS的@media screen 规则为不同的屏幕尺寸设置不同的样式(响应式图片布局)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

当你想要在不同的屏幕尺寸或设备上应用不同的CSS样式时,可以使用 @media 规则,特别是 @media screen 规则。这允许你根据不同的屏幕特性,如宽度、高度、方向等,为不同的屏幕尺寸设置不同的样式。

具体来说,@media screen 规则用于在CSS中创建响应式设计,使网页在不同设备上呈现出最佳的外观和布局。你可以定义不同的CSS规则,以便在特定的屏幕尺寸范围内应用不同的样式。

以下是一个简单的示例,展示如何使用 @media screen 规则:

/* 默认样式 */
body {
    font-size: 16px;
    background-color: white;
    color: black;
}

/* 在屏幕宽度小于或等于 768px 时应用的样式 */
@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
        background-color: lightgray;
    }
    h1 {
        font-size: 24px;
    }
}

/* 在屏幕宽度大于 1200px 时应用的样式 */
@media screen and (min-width: 1200px) {
    body {
        font-size: 20px;
        background-color: beige;
    }
}

在这个例子中,当屏幕宽度小于等于 768px 时,文本字体大小变为 14px,背景颜色变为浅灰色。当屏幕宽度大于 1200px 时,文本字体大小变为 20px,背景颜色变为米色。

你可以根据需要设置不同的媒体查询条件,来适应不同的屏幕尺寸和设备。通过这种方式,你可以实现一个在各种屏幕上都呈现出优雅外观的响应式设计。

下面是一个具体的例子:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width",initial-scale=1,maxinum-scale=1.0,user-scalable=”no”>
    <!--指定页头信息-->
    <title>使用CSS图片</title>
    <style>
        /*当屏幕宽度大于800像素时*/
        @media screen and (min-width: 800px) {
            .bcImg {
                background-image:url(m3.jpg);
                background-repeat: no-repeat;
                height: 500px;
            }
        }
        /*当屏幕宽度小于等于800像素时*/
        @media screen and (max-width: 800px) {
            .bcImg {
                background-image:url(m4.jpg);
                background-repeat: no-repeat;
                height: 500px;
            }
        }
    </style>
</head>
<body>
<div class="bcImg"></div>
</body>
</html>

效果如下:
使用CSS的@media screen 规则为不同的屏幕尺寸设置不同的样式(响应式图片布局),HTML,css,前端
使用CSS的@media screen 规则为不同的屏幕尺寸设置不同的样式(响应式图片布局),HTML,css,前端文章来源地址https://www.toymoban.com/news/detail-683608.html

到了这里,关于使用CSS的@media screen 规则为不同的屏幕尺寸设置不同的样式(响应式图片布局)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web前端之行为验证码、不同设备和屏幕尺寸呈现不同大小、元素宽度根据视口宽度进行调整、元素或图片裁剪、图片验证码

    1、版本一的样式比较齐全; 2、版本二的JS逻辑和功能效果比较完善,且是别人的代码,后续会对样式进行完善。[Gitee | 哔哩哔哩]; 3、两个版本各有千秋,主要学习里面的一些技巧,这里主要介绍版本一的样式技巧; 4、行为验证码一般是后端实现,而且大概率是使用第三方

    2024年04月17日
    浏览(73)
  • 前端设置页面字体尺寸跟随屏幕大小而进行变化

    越来越多的前端项目现在需要这个操作,其操作的原因很简单,你的项目可能跑在小尺寸分辨率的电脑上,也有可能在大尺寸的会议平板上,更有甚者是在LED上。那么如何让你的项目根据屏幕分辨率的大小而自动变化,修改页面展示字体以及调整尺寸呢? 按照我们所需功能,

    2023年04月12日
    浏览(59)
  • 【unity每日一记】 Camera相机+ Screen屏幕+动画机

    👨‍💻个人主页 :@元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏 : unity每日一记 ⭐【Unityc#专题篇】之c#系统化大礼包】 ⭐【unity数据持久化】数据管理类_PlayerPrfs ⭐【unity本站最全系列】unity常用API大全

    2024年02月10日
    浏览(72)
  • 各类主流设备屏幕尺寸查询,屏幕尺寸对照表

    Acer Chromebook Chrome 11.6 29.0 1366 768 1366 135 100% MDPI 16 : 9 0 Google Chromebook Pixel Chrome 12.9 33.0 2560 1700 1280 239 200% XHDPI 3 : 2 0 Samsung Chromebook Chrome 11.6 29.0 1366 768 1366 135 100% MDPI 16 : 9 0 Apple Cinema Display 30\\\" OS X 30.0 76.0 2560 1600 2560 100 100% MDPI 8 : 5 0 Apple Thunderbolt Display 27\\\" OS X 27.0 69.0 2560 1440 2560 1

    2024年02月05日
    浏览(150)
  • 用于计算机屏幕安全摄像头系统:Screen Anytime Crack

    Screen Anytime 是一款软件,旨在自动将整个用户会话或 PC/服务器/VM/Kiosk 的 /RDP/Citrix/RemoteApp 会话的屏幕活动记录到视频日志文件中,以用于记录、审核和监控目的。通过重播其高度压缩的视频,您可以轻松回顾单台计算机或一组服务器/PC 的任何过去时刻。还包括集中管理和实

    2024年01月23日
    浏览(61)
  • 自适应的屏幕 lib-flexible 和 v-scale-screen

    首先是要安装 然后在 修改  这个根据设计稿的大小来计算  这个是 把屏幕设计成24份  1920/24  80px=1rem 一定要引入啊 然后在软件中安装插件  随后在设置中 这个 80 是  上面设计稿出来的结果 根据自己的需要来写啊  第二种是 v-scale-screen 首先是 安装  根据自己的vue版本

    2024年02月08日
    浏览(36)
  • Android适配平板屏幕尺寸

    一、划分手机和平板 人为判断方法:     大于6英寸的就是平板。小于6英寸的都是手机     平板尺寸: 6英寸、7英寸、10英寸、14英寸… Android系统支持多配置资源文件,我们可以追加新的资源目录到你的Android项目中。命名规范: 资源名字-限制符 layout/drawble文件夹     说

    2024年04月14日
    浏览(51)
  • Apple设备屏幕尺寸和方向

    表格中包括了各种型号的iPad、iPhone、以及iPod touch等设备的详细信息,涵盖了从iPad Pro到各代iPhone和iPod touch的多个型号。 这些信息可用于开发应用程序时优化界面布局和图像显示,确保在不同设备上有良好的显示效果。 Device screen sizes and orientations Device Dimensions (portrait) 12.9”

    2024年02月19日
    浏览(55)
  • 前端实现自适应屏幕数据可视化大屏(vue + v-scale-screen组件 + dataV组件)

    前言 目前市面上有很多付费的数据可视化平台,作为一个代码编程人员,为啥不自己搞一套呢,不仅自己可以增加自己的技能,也可以减少开发成本,何乐而不为呢? 写这篇文章,一方面工作有需求要实现数据可视化大屏,另一方面当然现在也有很多场景都用到数据可视化

    2024年02月08日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包