css - 部署后的响应式设计
问题描述
各位开发者您好!
我制作了这个电子商务应用程序,通过使用 chrome 中的内置工具使其具有响应性。虽然 Chrome 中的一切看起来都很好,但当我部署该应用程序时,由于某种奇怪的原因,它被超级劫持了。
在这里,您可以在 Chrome 中看到应用程序的一部分,在我的 Iphone SE 上看到相同的部分。
这在我之前的一些应用程序中发生过,我不知道我在哪里犯了错误。是否使用 Google Chrome 内置工具,是否是我编写的媒体查询,是否是整体 CSS。我完全迷路了。我留下一个小片段来展示我通常如何设置组件样式和添加媒体查询,以便你们指出我可能犯的任何重大错误。
.products-container {
width: 100%;
height: auto;
display: flex;
justify-content: center;
margin: 2rem 0 0rem 0;
}
.products {
width: 95%;
height: auto;
display: flex;
justify-content: space-between;
}
.categories {
width: 20%;
height: 100%;
display: flex;
flex-direction: column;
}
.category {
font-size: 0.8rem;
padding: 0.2rem 0 0 2rem;
font-weight: lighter;
cursor: pointer;
}
@media only screen and (max-width: 915px){
.products {
flex-direction: column;
align-items: center;
}
.categories {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-auto-flow: row;
grid-auto-rows: 1fr;
grid-gap: 0.5rem;
width: 78%;
margin-bottom: 2rem;
}
.category {
background-color: rgb(48, 48, 48);
border: none;
outline: none;
color: white;
padding: 0.5rem 1rem 0.5rem 1rem;
text-align: center;
align-self: center;
}
}
@media only screen and (max-width: 830px){
.categories {
width: 95%;
}
}
@media only screen and (max-width: 683px){
.categories {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 485px){
.category {
font-size: 0.6rem;
padding: 0.3rem 0.7rem 0.3rem 0.7rem;
}
}
@media only screen and (max-width: 340px){
.category {
text-align: center;
font-size: 0.5rem;
}
}
这是实际的组件:
const Products = () => {
return (
<div className="products-container">
<div className="products">
<div className="categories">
<h1 className="category">VIEW ALL</h1>
<h1 className="category">BACK IN STORE</h1>
<h1 className="category">BEST-SELLERS</h1>
</div>
<Clothes />
</div>
</div>
);
};
*编辑 - 排序方式按钮 CSS:
.sortBy-btn {
font-size: 0.6rem;
margin: 0.5rem 0 0 2rem;
width: 8rem;
padding: 0.2rem;
background-color: rgb(34, 34, 34);
color: white;
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
}
.sortBy-btn:hover {
background-color: grey;
}
@media only screen and (max-width: 915px){
.sortBy-btn {
background-color: indianred;
color: white;
font-weight: 500;
font-size: 0.8rem;
width: auto;
margin: 0;
border-radius: 0;
}
}
@media only screen and (max-width: 454px){
.sortBy-btn {
font-size: 0.6rem;
}
}
@media only screen and (max-width: 347px){
.sortBy-btn {
font-size: 0.5rem;
}
}
任何帮助将非常感激。
解决方案
我最近也有这个错误。我认为对于 safari(这是我假设您在 iPhone 上测试时使用的),您需要对容器应用固定高度。尝试为按钮组件添加一个固定高度,看看它是否有所作为
推荐阅读
- c# - 如何根据 DataType 组合“collectionResult”
- sql - 按顺序选择所有相似的数据
- python - 如何配置自动完成?
- jpa - 如何获取多个延迟加载的 OneToMany 列表?
- python - 使用列表理解制作过滤列表不起作用
- python - 如何使用 AWS Lightsail 提高 Python SQLAlchemy 性能?
- sparql - 如何在带有德语变音符号的 dbpedia SPARQL 查询中使用 CONTAINS?
- r - 使用 sub_str 在 R 中将值映射为字典
- python - 使用 PyTrends 抓取数据时出现问题“请求失败:Google 返回了带有代码 500 的响应。”
- mpi - MPI 3 共享内存和缓存冲突