gpt4 book ai didi

css - 跨桌面屏幕尺寸很好地显示

转载 作者:行者123 更新时间:2023-11-28 17:44:55 25 4
gpt4 key购买 nike

我在我的视网膜显示器上设计了一个网站,设置为最高分辨率。在这个分辨率下,网站看起来真的很棒 :p。然而,当我在较小的 13"显示器上查看网站时,所有元素和字体都太大了,而且在你的面前。

我做了一些研究,找到了两种方法来尝试在不同的桌面屏幕尺寸上以一种很好的方式展示网站:

  1. 使用媒体查询来缩放/转换 body 。但是,这种“感觉”不对,我可以想象这会对性能产生一些影响。此外,我可以想象这会导致屏幕尺寸不一致

  2. 全面使用 ems。我不太确定什么是正确的起点,但我读到有些人将一切都基于他们的字体大小。但是,我真的不知道这对图像有何影响。

有人可以告诉我什么是使网站在桌面屏幕尺寸上很好地显示的最佳方法。

附注该网站基于 twitter bootstrap

最佳答案

我会建议第二种选择。它的工作方式是以 px 为单位设置元素字体大小,并使用容器和其中的 div 的相对大小。例如

<body>
<div id="container">
<article>This is some text</article>
</div>
</body>

CSS:

html{
font-size: 32px;
}
#container{
font-size: 1.5 rem;
}
article{
font-size: 1.2 em;
}

CSS-tricks 有一篇关于此的好文章 - http://css-tricks.com/rems-ems/

关于图片缩放,可以在JS中根据window.width()动态完成

关于css - 跨桌面屏幕尺寸很好地显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23383789/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com