gpt4 book ai didi

javascript - 如何在调整浏览器窗口大小时更改正文宽度,以便于阅读内容?

转载 作者:太空宇宙 更新时间:2023-11-04 08:58:28 25 4
gpt4 key购买 nike

此处,网页显示在 1349x659 的浏览器窗口中。 (这正是图像的尺寸)。正文宽度设置为 60%,内容包装精美且易于阅读。

1349x659

此处我已将浏览器窗口的大小调整为 478x642。你可以看到 60% 的车身宽度不再提供良好的视野。

478x642

由于网页可以在服务器不知道的情况下调整大小,因此解决方案必须在客户端。或者在 css 文件中完成。

我建议这个算法:

如果访问者是移动的,那么不管其他什么,正文宽度都应该是 100%。

如果访问者不是移动设备(平板电脑、个人电脑等),则 (

如果浏览器窗口的宽度大于高度,则主体宽度将等于窗口高度。

但如果宽度小于高度,则主体宽度为 100%。)

这是一个 fiddle

https://jsfiddle.net/rawj7vxc/

<body>
Some posts are not public. To access them, please login to your account, or register if you have none yet. By logging in to your account, you're no longer considered a "guest", this has some benefits which come with account promotions. Seeing more posts is one of those benefits. Registered accounts need verification. You'll be told how to this after the first unverified login. The verification will, however, not be immediate.
</body>

body {
background-color: rgb(31,25,0);
width: 60%;
padding: 0;
margin: 0 auto;

font-family: consalos;
text-align: justify;
color: rgb(215,200,0);

overflow: auto;
}

最佳答案

您需要研究使用媒体查询。这些将使您的设计适合屏幕的宽度和高度。

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}

Media Queries

关于javascript - 如何在调整浏览器窗口大小时更改正文宽度,以便于阅读内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42946915/

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