main.css

最新推荐文章于 2024-08-29 08:30:53 发布

贺今宵

最新推荐文章于 2024-08-29 08:30:53 发布

阅读量158

点赞数 2

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/qq_51389137/article/details/137771974

版权

这篇文章展示了如何使用CSS和媒体查询技术实现页面在不同屏幕尺寸下的自适应设计，包括最大宽度和高度的调整，以及链接hover效果的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@import './base.css';

#app {
  /* max-width: 1280px; */
  margin: 0;

  width: 100%;
  height: 100vh;
  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (max-width: 1366px) {
  /* body {
    display: flex;
    place-items: center;
  } */

  #app {
    /* display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem; */
    width: 1366px;
    /* overflow: auto; */
  }
}
@media (max-height: 768px) {
  /* body {
    display: flex;
    place-items: center;
  } */

  #app {
    /* display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem; */

    height: 768px;
    /* overflow: auto; */
  }
}