个人中心
gpt4 book ai didi

javascript - 更改屏幕大小时使内容自适应

转载 作者：行者123 更新时间：2023-11-28 08:40:44 24 4
gpt4 key购买 nike

我正在创建一个需要响应的网站，这里没问题，因为我知道这是如何完成的，但我还需要根据屏幕大小更改显示，这必须动态完成，因此我不能使用媒体查询(我认为)。

我对所有选项都持开放态度:纯 css、html、javascript、jQuery、...

我有一个如下所示的网站: enter image description here

这看起来已经很好了，现在，当我调整窗口大小使其变小时，背景会消失，这是基于 CSS3 媒体查询实现的:

#OfficeUI { min-height: 52px; background: url('../Images/Application/Backgrounds/Circuit.png') no-repeat scroll right top rgba(0, 0, 0, 0); color: #444; font-family: 'Segoe UI'; font-size: 0.75em; overflow: hidden; }

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

    #OfficeUI { background-image: none; }
}

到目前为止一切顺利，但现在真正的问题出现了。当我将窗口的大小调整为现在的一小部分时，网站的行为确实是这样的:

enter image description here

在这种特殊情况下，文本“收件箱 - 用户...”正在图标上移动。我在这里想要的是图标的区域变小了，这意味着最右边的图标将不再显示。如果我进一步调整窗口大小，该区域会再次缩小，因此图标会再次被删除。

但这里的问题是我无法控制显示的内容，可能有 6 个图标，也可能有很长的标题，反之亦然。

我唯一能接受但未在解决方案中实现的想法如下 (jQuery):

  1. 计算窗口的宽度。
  2. 计算标题区域的宽度。
  3. 计算图标区域的宽度。

在调整窗口大小时，我会像这样实现它们:

  1. 如果图标区域的大小和标题区域的大小大于窗口大小，则将图标区域缩小指定数量的像素(预定义)，以便删除 1 个图像并在每次调整大小时重复此操作.

我对这个解决方案的唯一问题是网站会增长很多，并且在每次窗口大小调整时执行所有这些类型的计算可能不是最佳实践。

我有点担心网站会变得非常卡顿。

[编辑]:我添加了一个包含当前代码的片段。

/* General styling that can be applied to all the elements. */
.no-margin { margin: 0px; }
.no-padding { padding: 0px; }

/* General styling for the root of the website. */
#OfficeUI { min-height: 52px; background: url('../Images/Application/Backgrounds/Circuit.png') no-repeat scroll right top rgba(0, 0, 0, 0); color: #444; font-family: 'Segoe UI'; font-size: 0.75em; overflow: hidden; }

/* General styling that can be applied to all kind of elements inside the OfficeUI container. */
#OfficeUI .center { text-align: center; }
#OfficeUI .absolute { position: absolute; }

/* Container elements. */
#OfficeUI .container { display: inline-block; }
#OfficeUI .container-full-width { width: 100%; }

/* Styling for the OfficeUI elements itself. */
#OfficeUI .application-title { margin: 6px 3px 0px 0px; }
#OfficeUI .application-icons img { margin: 3px 1px 0px 4px; }
#OfficeUI .application-icons img:first-child { margin: 3px 0px 0px 7px; }
#OfficeUI .application-icons img:hover:not(:first-child) { background-color: #cde6f7; }

/* Provide some responsive styling. 
   The following styling is applied to the screen when the width of the window is less than 497px. */
@media screen and (max-width: 497px) {
    
    /* Hide the background image when the size of the screen is smaller than the size of the background-image. */
    #OfficeUI { background-image: none; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Defines the main content area for the website. -->
    <body class="no-margin no-padding">
        <!-- Provides the main OfficeUI area. -->
        <div id="OfficeUI">
            
            <!-- Defines the header itself. -->
            <header>
                
                <!-- Provides the area in which the application icons are being showed. -->
                <div class="absolute">
                    <div class="container application-icons">
                        <img src="Resources/Images/Application/Application.png"/>
                        <img src="Resources/Images/Application/Send-Receive.png"/>
                        <img src="Resources/Images/Application/Undo.png"/>
                    </div>
                </div>
                
                <!-- Provides the area in which the application title is being rendered. -->
                <div class="container container-full-width center">
                    <div class="application-title">Inbox - user@github.com - Outlook</div>
                </div>
            </header>
        </div>
    </body>

调整窗口大小时，我希望看到如下内容:

enter image description here

对此有什么建议吗？

亲切的问候，

最佳答案 

#OfficeUI .application-icons { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}


@media screen and (max-width: 350px) {
    #OfficeUI .application-icons { width: 25px;}
}

@media screen and (max-width: 250px) {
    #OfficeUI .application-icons { display: none}
}

演示:http://jsfiddle.net/qk1du0wh/

关于javascript - 更改屏幕大小时使内容自适应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27819399/

24 4 0
文章推荐： css - 为什么这个 flexbox 布局在 Safari 中被破坏了？
文章推荐： javascript - 使用 typescript 嵌套 Angular Directive(指令)
文章推荐： javascript - JS在span中查找id
文章推荐： javascript - 如何让 JavaScript 触发声音文件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com