文本在整个屏幕上传播的媒体查询

问题描述

我希望文本从上到下、从左到右遍布整个网页。 我使用 vw、vh 大小表示文本大小，放置在 div 中。 在文本中，有链接（.href）的大小略大。

它目前适用于 2015 年的 mac 13 英寸，但由于某种原因不适用于 2017 年的 13 英寸。 它也不适用于 ipad 11 英寸纵向。

我是媒体查询的新手，可能做错了。 期待您的回复！非常感谢。

body {
  margin: 0;
  height: 100%;
  width: 100%;
    }


@media only screen 
and (min-width: 200px){
.div {
 width: 97vw;
 height: 97vh;
 margin-right: auto;
 margin-left: auto;
 position: relative;
 margin-bottom: 10vw;
}

.txt {
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 text-align: justify;
 text-justify: inter-word;
 line-height: 1.5;
 font-size: 2.5vh;
}

.href {
 color: #0000ff;
 font-size: 3vh;
}

}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
.div {
 width: 97vw;
 height: 97vh;
 margin-right: auto;
 margin-left: auto;
 position: relative; /* text inside of div */
 margin-bottom: 10vw;
}

.txt {
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 text-align: justify;
 text-justify: inter-word;
 line-height: 1.5;
 font-size: 3vh;
}

.href {
 font-size: 3.5vh;
}

}

@media screen and (min-width: 1025px) {
.div {
 width: 97vw;
 margin-right: auto;
 margin-left: auto;
 position: relative; /* text inside of div */
 margin-bottom: 10vw;
}

.txt {
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 text-align: justify;
 text-justify: inter-word;
 line-height: 1.5;
 margin-bottom: 1rem;
 font-size: 2.5vw;
}

.href {
 font-size: 3vw;
}

}```

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）