让我的网络应用程序调整为不同的屏幕尺寸 -
Posted
技术标签:
【中文标题】让我的网络应用程序调整为不同的屏幕尺寸 -【英文标题】:Having my web app adjusted to different screen sizes - 【发布时间】:2021-09-16 10:55:40 【问题描述】:我在 React 中有我的 webapp。
我使用 CSS @media 查询将网站大小/分辨率调整为不同的分辨率。
我已针对以下分辨率断点调整 Web 应用程序:1204、1200、1024、768、480。
对于分辨率高于 1204 的屏幕,网站开始变得未调整。
我几乎所有的测量都使用 rem。
这是我的标头代码示例:
React 的 html:
<header className="header__section" id="header-section-hero">
<div className="header__intro"><h1 className="header__hero">ABC</h1></div>
<a href="#"><div className="github-icon"><FaGithub className="github-text"/></div></a>
<a href="#"><div className="linkedin-icon"><FaLinkedin className="linkedin-text" /></div></a>
/** <div className="ball" /> */
</header>
SASS/CSS:
@media only screen and (max-width: 1204px)
.header__section
width: 81rem;
height: 42rem;
background-image: url("../Assets/bg-hero.jpg");
background-size: cover;
background-repeat: no-repeat;
.header__intro
h1
color: white;
font-family: "Arial", sans-Serif;
font-size: 2rem;
text-align: center;
float: left;
.github-icon
background-color: lightgray;
border-radius: 50%;
width: 5.5rem;
height: 5.5rem;
position: absolute;
top: 39rem;
left: 25rem;
z-index: 10;
opacity: 0.8;
.github-text
font-size: 40px;
position: relative;
top: 1.5rem;
left: 1.5rem;
.github-text:hover
transform: rotate(-30deg);
cursor: pointer;
.linkedin-icon
background-color: lightgray;
border-radius: 50%;
width: 5.5rem;
height: 5.5rem;
position: absolute;
top: 39rem;
left: 56rem;
z-index: 10;
opacity: 0.8;
.linkedin-text
font-size: 35px;
position: relative;
left: 1.5rem;
top: 1.5rem;
我的问题:
网络应用程序的大小无法调整到大于 1204 像素的大小的原因是什么, 将页面调整为不同屏幕尺寸的最佳方法是什么?
【问题讨论】:
如果这是您的 CSS 文件中唯一的文本,那么该样式将仅适用于宽度:1204。视口宽度超过 1024 像素的自定义样式绝对为零。它们将具有默认样式。 你将没有任何样式。也许您可以尝试执行这里所说的w3schools.com/css/css_rwd_mediaqueries.aspIDK 最佳实践,似乎我与之合作的每家公司都有自己的规则。 【参考方案1】: Here, you are using (max-width: 1204px)
max-width 代表显示分辨率的最大值。所以无论你写什么样式表都只能在 1204px 宽度内工作。 你可以在上面使用 min-width ..我希望它会起作用 将您的代码更改为
(max-width: 1204px)
【讨论】:
正如目前所写,您的答案尚不清楚。请edit 添加其他详细信息,以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。以上是关于让我的网络应用程序调整为不同的屏幕尺寸 -的主要内容,如果未能解决你的问题,请参考以下文章
在 Spring Boot MVC 中添加 ShallowEtagHeaderFilter