跳转至

Web Design 3 : Future Features

导言

If I have time, i will consider to add these js functions in the future.

searching bar in navigation bar

URL change color when mouse hovering

grid block to be focused when mouse hovering

All people name in any page linked to his subpage.

对手机浏览的支持， 竖长屏的支持。

字体随width变小

在响应式设计中，可以使用CSS中的媒体查询（media queries）和相应的样式规则来调整标题的字体大小，以适应不同的屏幕宽度。以下是一个简单的示例：

/* 默认字体大小 */
h1 {
  font-size: 7em;
}

/* 在小屏幕上调整字体大小 */
@media only screen and (max-width: 600px) {
  h1 {
    font-size: 5em;
  }
}

/* 在更小的屏幕上进一步调整字体大小 */
@media only screen and (max-width: 400px) {
  h1 {
    font-size: 3em;
  }
}

在上述示例中，当屏幕宽度小于或等于600px时，h1元素的字体大小为5em；当屏幕宽度小于或等于400px时，字体大小为3em。你可以根据需要添加或修改这些媒体查询规则。

这只是一个简单的示例，实际上，你可能需要根据你的网站设计和需求调整这些值。确保在应用这些样式之前，你已经了解你的主题的CSS结构，并找到合适的选择器。

缩放最大字体

/* 缩放大于两倍，重新设置字体 */
@media only screen and (min-resolution: 2dppx)  {
    .slogan {
        font-size: 4em;
    }
}

小页面菜单按钮

/* 当屏幕宽度小于某个阈值时，隐藏菜单项 */
@media screen and (max-width: 850px) {
    .menu-list {
        display: none;
    }
    .menu-button{
        display: block;
    }
}

最小宽度：网页宽度不能小于一个

如果你希望确保网页的宽度不小于一个特定值，你可以使用 CSS 的 min-width 属性。这个属性设置元素的最小宽度，防止它变得太小。以下是一个例子：

body {
  min-width: 500px; /* 设置 body 元素的最小宽度为 500px */
}

在这个例子中，body 元素的最小宽度被设置为 500px。这将确保网页的宽度不会小于这个值。你可以根据需要调整这个值。

如果你想要应用这个限制到特定的元素而不是整个页面，只需将 min-width 属性应用于相应的元素即可。例如，如果你想要一个特定的 div 元素不小于 300px：

.my-div {
  min-width: 300px;
}

这样，.my-div 元素的宽度将不会小于 300px。

width 与 父元素相同，但是height绝对值等于width

如果你想要设置一个正方形的元素，使其宽度等于父元素的宽度，同时高度也是一个绝对值，可以使用百分比作为 padding-top 的值。这是一个常见的技巧，特别适用于需要正方形容器的情况。

下面是一个示例：

.parent-container {
  width: 300px; /* 设置父元素的宽度 */
  position: relative; /* 设置相对定位，用于绝对定位子元素 */
}

.square-container {
  width: 100%; /* 设置宽度等于父元素的宽度 */
  padding-top: 100%; /* 设置 padding-top 百分比，使高度等于宽度 */
  position: absolute; /* 设置绝对定位，使子元素脱离文档流 */
}

.square-content {
  position: absolute; /* 设置绝对定位，使内容脱离文档流 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: lightblue; /* 用于演示的背景颜色 */
}

在这个例子中，.square-container 的 padding-top 设置为 100%，使其高度等于宽度。然后，.square-content 使用绝对定位填充 .square-container，使其脱离文档流并占满整个容器。

这样，.square-content 就成为了一个正方形容器，其宽度等于父元素的宽度，高度也是相同的绝对值。

参考文献

评论