找回密码
 立即注册

QQ登录

只需一步,快速开始

范方舟
金牌服务用户   /  发表于:2024-11-4 18:04  /   查看:99  /  回复:3
10金币
现在开发一个页面,它是由左中右3部分构成的,但是左边的部分因为有搜索区域。因此宽度必须设置的固定从而满足能显示完整,但这样的话在1366*768的最低分辨率下会导致时间范围搜索显示不全,有没可能在布局时3部分等比例缩放?或者说在分辨率低到一定程度时让时间范围和重置搜索按钮换行显示。













附件: 您需要 登录 才可以下载或查看,没有帐号?立即注册

最佳答案

查看完整内容

您好,因为目前活字格还不能直接给一个页面设置多种布局方式,或者针对某个子页面设置不同的布局方式。 所以有个稍微绕的办法,就是把搜索栏这一块,使用【嵌入的HTML】插件: HTML自定义集成 - 葡萄城市场 这个插件可以嵌入自定义的HTML,然后自己使用flex布局写一个html页面,例如: CSS: 这样,子元素会根据父元素的宽高自动跳转换行。

3 个回复

正序浏览
Erik.Xue讲师达人认证 悬赏达人认证 活字格认证 Wyn认证
超级版主   /  发表于:2024-11-5 10:54:59
4#
范方舟 发表于 2024-11-5 10:21
平台的字体大小会随着分辨率的变化而自动缩放么?

目前也不太行,你说的这种应该是字体设置单位要为相对单位,比如em、rem、vw、vh。

活字格暂时没有这样的设置。
回复 使用道具 举报
范方舟
金牌服务用户   /  发表于:2024-11-5 10:21:44
3#
Erik.Xue 发表于 2024-11-5 08:55
您好,因为目前活字格还不能直接给一个页面设置多种布局方式,或者针对某个子页面设置不同的布局方式。

...

平台的字体大小会随着分辨率的变化而自动缩放么?
回复 使用道具 举报
最佳答案
最佳答案
Erik.Xue讲师达人认证 悬赏达人认证 活字格认证 Wyn认证
超级版主   /  发表于:2024-11-4 18:04:18
来自 2#
您好,因为目前活字格还不能直接给一个页面设置多种布局方式,或者针对某个子页面设置不同的布局方式。

所以有个稍微绕的办法,就是把搜索栏这一块,使用【嵌入的HTML】插件:

HTML自定义集成 - 葡萄城市场




这个插件可以嵌入自定义的HTML,然后自己使用flex布局写一个html页面,例如:
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Flexbox Wrap Example</title>
  7.     <link rel="stylesheet" href="styles.css">
  8. </head>

  9. <body>
  10.     <div class="container">
  11.         <div class="item">Item 1</div>
  12.         <div class="item">Item 2</div>
  13.         <div class="item">Item 3</div>
  14.         <div class="item">Item 4</div>
  15.         <div class="item">Item 5</div>
  16.         <div class="item">Item 6</div>
  17.         <div class="item">Item 7</div>
  18.         <div class="item">Item 8</div>
  19.     </div>
  20. </body>

  21. </html>
复制代码
CSS:
  1. /* styles.css */
  2. body {
  3.     font-family: Arial, sans-serif;
  4. }

  5. .container {
  6.     display: flex;
  7.     flex-wrap: wrap;
  8.     /* 允许子元素换行 */
  9.     gap: 10px;
  10.     /* 子元素之间的间距 */
  11.     padding: 10px;
  12.     border: 1px solid #ccc;
  13.     width: 80%;
  14.     /* 父元素的宽度,可以根据需要调整 */
  15.     margin: 0 auto;
  16.     /* 居中对齐 */
  17. }

  18. .item {
  19.     background-color: #f0f0f0;
  20.     padding: 10px;
  21.     border: 1px solid #ddd;
  22.     flex: 0 0 auto;
  23.     /* 子元素的宽度固定,不伸缩 */
  24.     min-width: 100px;
  25.     /* 子元素的最小宽度,可以根据需要调整 */
  26. }
复制代码
这样,子元素会根据父元素的宽高自动跳转换行。




本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部