根据浏览器高度和宽度保持纵横比和字体大小?

2023-12-31

下面的代码附在window.onresize = resize;. The baseWidth and baseHeight在负载上读取作为计算的基础。这main变量只需将其设置到主 html 节点即可定义。字体设置在块元素上会导致所有的em基于其中的元素以实物方式调整大小。当浏览器的宽度或高度更改时,会重新计算该比率。请参阅演示以了解我使用 JS 实现的效果,但想找到一个纯 CSS 解决方案:http://codepen.io/anon/pen/nLauF http://codepen.io/anon/pen/nLauF

我一直在探索 CSS3 中的选项,例如calc。请随意对下面的 JS 提出任何改进建议。

             function resize() {
                var height = 0,
                    width = 0;

                if(window.innerWidth <= window.innerHeight) {
                    size = window.innerWidth / baseWidth;
                    height = baseHeight * size;
                    width = window.innerWidth;

                } else {
                    size = window.innerHeight / baseHeight;
                    height = window.innerHeight;
                    width = baseWidth * size;
                }

                if(baseWidth * size > window.innerWidth) {
                    size = window.innerWidth / baseWidth;
                    height = baseHeight * size;
                    width = window.innerWidth;
                }

                main.style.height = height + "px";
                main.style.width = width + "px";
                main.style.fontSize = size * 16 + "px";
            }

Thanks!


我编写了这段代码,包括字体大小计算最小体积单位 https://developer.mozilla.org/en-US/docs/Web/CSS/length :

DEMO http://jsfiddle.net/webtiki/890e1194/

CSS :

main {
    width: 80vmin;
    height: 60vmin;
    background-color: #000;
    position: absolute;
    top:0; bottom:0;
    left:0; right:0;
    margin:auto;
}
h1 {
    color: #fff;
    font-size: 30px; /* general fallback */
    font-size: 5vm; /* IE9 fallback */
    font-size: 5vmin;
}

对于浏览器支持,您可以检查canIuse http://caniuse.com/#feat=viewport-units

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

根据浏览器高度和宽度保持纵横比和字体大小? 的相关文章

  • 整理 CSS 的最佳方法是什么? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在整理一个以前由不同的人修改过的网站 这是我拥有的页面的骨架 测试 html http pastry se 94064 nav css ht
  • 如何在鼠标悬停时覆盖 div / box?

    我有一个链接 当用户将鼠标悬停在其上时 它应该在链接下显示一个框 div 盒子应该覆盖其下方的所有内容 我如何使用 css 或 javascript 来做到这一点 您有一个隐藏的绝对定位的 div 和链接的子级 然后 当您将鼠标悬停在链接上
  • 使文本“bbb”位于图标旁边,而不是压在一起

    Goal 使字母 bbb 可见 并且文本应位于图标旁边 Problem 我尝试将文本移到右侧 但不起作用 你们知道该怎么做吗 JSfiddle https jsfiddle net 5f7qjLgf 1 Thanks result filt
  • ABSMIDDLE 在 Firefox 和 Chrome 上的工作方式不同吗?

    我有一个图标图像和文本 如下所示 一切的代码来源是 img src align left My Title Here 问题在于 与 Firefox 相比 Chrome 中的图标没有与标题垂直对齐 我觉得absmiddle根本不起作用 有什么
  • 通过innerHTML输入时span不应用css样式

    我有 Angular 应用程序 作为它的一部分 我在 div 中显示查询结果 具有 JSONContainer 的 ID 我想突出显示结果中的特定查询 因此我使用了一个管道来搜索结果 并将文本中的 FIELD VALUE 替换为 span
  • HTML - 使用 JS 根据值更改文本颜色

    我正在使用 Django 创建一个以 HTML 形式显示的表格 我想当数字为负数时将数字的颜色更改为红色 当数字为正数时将数字的颜色更改为绿色 我知道我需要使用 JS 来实现这一点 但我无法让它工作 任何帮助将不胜感激 这是我的 Djang
  • 需要为每个图例文本高图应用背景颜色

    正如我在问题中所说 我希望改变我的传奇 例如 FROM TO 我已经尝试过这个背景颜色 legend backgroundColor CCC layout horizontal floating true align left vertic
  • 使用多个相互矛盾的 css 文件时的优先顺序

    当在同一页面上使用多个 css 文件并且它们发生冲突时 我如何知道将使用哪一个 例如 如果一个说蓝色主体背景 另一个说红色 快速回答 如果两段 CSS 具有相同的特异性 http web archive org web 2016021005
  • 如何避免 Angular 材料中出现额外的 mat-form-field-underline

    我在查找为什么在使用组件时会出现额外的 mat form field underline 时遇到问题 我的页面使用此标记
  • 第二个子div高度填充父级高度

    我有一个 div 文章 它有两个子项 标题和 content outer 标题有一个正确的高度 我希望 content outer 有一个高度 没有给出具体数字 例如 200px 以便标题高度 content outer 高度 文章高度 这
  • 使用尾随与号 (&) 作为类组合选择器,而不是后代选择器

    我想申请一个班级 highlight到一堆不同的元素并根据元素类型设置它们的样式 我可以这样做 input type text highlight select highlight someOtherSelector hightlight
  • 文本输入框作为 SVG 中的“foreignObject” - 文本溢出问题

    我使用 foreignObject 标签在 svg 中有一个文本输入框 这很有效 但是如果您在输入框中输入的内容比其宽度长 从而导致其溢出 那么文本实际上会出现在页面上的其他位置 可能是没有外来对象标记的默认位置 这是一些屏幕截图来解释正在
  • 在 CSS 中实现 50/50 背景且无重叠

    我尝试创建一个带有两个背景图像的 div 一个在上半部分 一个在底部 如下所示 在此处输入图像描述 https i stack imgur com IPm8L png https i stack imgur com ezu9z png 然而
  • 为什么inline-block元素出现在inline元素的下方?如何让它们出现在同一行?

    我目前正在尝试理解基本的 HTML 和 CSS 概念 并遇到了一个非常奇怪的问题 我有两个元素 一个具有 display inline 另一个具有 display inline block 我正在尝试创建一个列表 类似的东西1 SOME C
  • 将自定义字体与 wkhtmltopdf 一起使用

    我正在尝试在使用 wkhtmltopdf 生成的 PDF 中使用自定义字体 我读到您不能使用 google webfonts 并且 wkhtmltopdf 使用 truetype ttf 文件 谁能证实这一点吗 所以我从 google we
  • 在每个打印页上重复水印? JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你
  • stripe checkout css内容策略错误

    我正在尝试创建一种形式条纹结账 https stripe com docs checkout在我的 Ionic 应用程序中 我创建了一个指令 将表单植入到我的内容视图中 但是当我运行它时 CSS 因违反内容策略而失败 checkout js
  • 将 html 转换为 pdf 时防止表格单元格跨页破坏

    使用 Google Apps 脚本 我有一个 html 模板 我填写该模板 然后以 pdf 形式发送 通过传真和 或电子邮件 该模板包括一个带有问题 答案的两列表格 如果行数足够多 表格会在pdf中跨页分页 并且分页符通常发生在单元格的中间
  • 有 CSS 父选择器吗?

    我该如何选择 li 元素是锚元素的直接父元素 举个例子 我的 CSS 应该是这样的 li lt a active property value 显然 有多种方法可以使用 JavaScript 实现此目的 但我希望 CSS Level 2 本
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图

随机推荐

  • 从 Runnable 返回值

    我花了几天时间试图解决这个问题 但我不能 解决这个问题的方法是去 StackOverflow D 碰巧我正在使用 libgdx 制作游戏的库 并且在 Android 中查询代码是通过Handler http developer androi
  • 带有自动完成材质 UI 的 React Form Hook

    我有一个countries数组包含id and name 目前我正在使用 Material UIAutocomplete元素和我有一个反应钩子形式 当我提交表单时 我想获取国家 地区 ID 目前它正在发布国家名称 有没有一种方法可以发布 i
  • 了解 Android:Zygote 和 DalvikVM

    我想了解 Android 如何启动应用程序 问题是 Zygote 如何 以及为什么 分叉一个新的 Dalvik VM 我不明白为什么不能在同一个 Dalvik VM 中运行多个应用程序 问 zygote 是如何精确分叉 Dalvik VM
  • AngularJS - 如何在不提交表单的情况下使用 ng-click?

    我有一个同时具有 ng click 和 ng submit 的表单 ng submit 用于提交 而 ng click 则调用单独的函数 例如上传等 如何确保 ng click 不会意外提交表单 谢谢你 ngClick does not提交
  • 如何更改 Eclipse IDE 的启动 JVM?

    我在 Mac 上运行 Eclipse Oxygen 1A 我可以在 安装详细信息 中看到 IDE 本身当前使用的 JVM 实际启动 JVM 是 Oracle 的1 8 0 131JVM 我安装了一些其他 JVM 包括最新版本1 8 0 16
  • 用于电子邮件检测的 Java RegEx

    有人可以告诉我为什么以下正则表达式没有拾取以下字符串 bob at gmail dot com 吗 a zA Z0 9 s at at s w s dot dt s w 1 3 改变这个 at at to at at and dot dt
  • 使用 matplotlib 检测图像中的鼠标事件

    所以我正在尝试编写一个程序来检测图像上的鼠标单击并保存 x y 位置 我一直在使用 matplotlib 并且它可以处理基本绘图 但是当我尝试对图像使用相同的代码时 出现以下错误 cid implot canvas mpl connect
  • 无法将“WITH XMLNAMESPACES...FOR XML PATH”的输出设置为变量?

    我有一个如下查询 WITH XMLNAMESPACES DEFAULT http www somewhere com SELECT SOMETHING FOR XML PATH RootNode TYPE 运行这个效果很好 但是 当我尝试将
  • gulp-ruby-sass 在 Windows 中不是一个可识别的命令

    我第一次在 Windows Server 2012 VM 上尝试 gulp 我通常是 Mac 用户 所以我对 Windows 和 Powershell 这样的开发工具有点陌生 我安装了 Node js 和 npm 没有其他任何东西 我创建了
  • 在 Windows 命令提示符中运行最后执行的命令

    当使用 UNIX 时 我习惯于输入 运行最后执行的命令 如何在 Windows 命令提示符下执行类似的操作 followed by Enter
  • Pyaudio、portaudio 和 mac 10.7.5

    我在正确安装 pyaudio 时遇到问题 我为该项目设置了一个 virtualenv 我首先尝试安装 portaudio sudo port install portaudio 返回 gt Cleaning portaudio gt Sca
  • OpenCV 构建中的可选库提供什么?

    我正在尝试从源代码 最新的 SVN 主干 构建 OpenCV 并且有几个 可选 依赖项 它们本身的下载量将达到数 GB 尤其是使用 Qt 框架时 例如 CUDA 幽灵脚本 MIKTEX PYTHON EIGEN IPP JASPER JPE
  • 在没有 OpenMP 的计算机上忽略它

    我有一个使用 OpenMP 的 C 程序 该程序将在可能安装或未安装 OpenMP 的多台计算机上运行 我怎样才能让我的程序知道机器是否没有 OpenMP 并忽略它们 include
  • 从堆栈跟踪行号获取实际的 jsp 行号?

    这是堆栈跟踪 org apache jsp showcustomer jsp jspService showcustomer jsp java 128 org apache jasper runtime HttpJspBase servic
  • HTML5 CSS:行和调整大小

    下面的代码是响应式的 可以调整大小等 但我正在寻找一些真正简单的 CSS 来在桌面和移动设备上调整大小 我知道我可以使用标题链接 w3 css 中的 CSS 但必须有一种更好的方法来轻松地在桌面和移动设备上显示某些内容 移动设备默认显示内联
  • 打印/另存为 PDF(保留 CSS 布局)

    当我简单地打印 如在纸上 或将页面另存为 PDF 使用浏览器内置工具 时 CSS 会被完全忽略 我只会看到一行又一行的内容 有没有办法做到这一点 无需转换 HTML 2 PDF 图像 Thanks 这可能是因为你有media指定的选项
  • 当 SSM 代理变为活动状态时捕获事件

    我想在 SSM 的 Fleet Manager 中注册新的 EC2 实例时触发 lambda 这意味着可以使用 SSM 连接到该实例 但是我找不到在 EventBridge 中使用的模式 在 EventBridge 中 我尝试使用在文档中找
  • 在 SQL Server 2005 上违反 INSERT WHERE COUNT(*) = 0 上的 UNIQUE KEY 约束

    我正在从多个进程插入 SQL 数据库 这些进程有时可能会尝试将重复数据插入表中 我尝试以处理重复项的方式编写查询 但我仍然得到 System Data SqlClient SqlException Violation of UNIQUE K
  • nginx - laravel - hhvm-Fastcgi 出现错误 500

    I install a LEMP server in ubuntu 12 04 LTS 64 whit HHVM Fastcgi Service and i install laravel via laravel phar and test
  • 根据浏览器高度和宽度保持纵横比和字体大小?

    下面的代码附在window onresize resize The baseWidth and baseHeight在负载上读取作为计算的基础 这main变量只需将其设置到主 html 节点即可定义 字体设置在块元素上会导致所有的em基于其