如何根据屏幕大小缩放HTML中元素的大小？_html-js-css

概述我想在屏幕缩小或缩小时缩放标题中元素的大小.如何才能做到这一点？这是我的 HTML： <!DOCTYPE html> <html> <head> <title>myWebpage</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="I 我想在屏幕缩小或缩小时缩放标题中元素的大小.如何才能做到这一点？这是我的 HTML：

<!DOCTYPE HTML>    <HTML>      <head>        <Title>myWebpage</Title>        <Meta charset="utf-8">        <Meta http-equiv="X-UA-Compatible" content="IE=edge">        <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1">        <!-- The above 3 Meta Tags *must* come first in the head; any other head content must come *after* these Tags -->        <link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />        <link href="main.CSS" rel="stylesheet" type="text/CSS">      </head>      <body>          <header>            <h1>Hello!</h1>            <p>Welcome<br>Make Yourself at Home</p>          </header>     </body>   </HTML>

这是我的CSS：

* {  margin:0;  padding:0;}body,HTML {  height: 100%;  background: honeydew;}/* header*/header {  height: 100vh;  background-image: url(https://s3-us-west-2.amazonaws.com/webassets/apple.jpg);  background-size: cover;  background-position: center;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  text-shadow: 0 1px 3px rgba(0,.8);  text-align: center;}h1 {  color: honeydew;  Font-size: 50px;  Font-family: "Helvetica Neue";}p {  color: honeydew;  Font-size: 30px;  Font-family: "Helvetica Neue-Thin",sans-serif;}

这是我的全屏页面：

&安培;这里缩小到最小的窗口：

正如你所看到的,我需要文本按照我的背景进行缩放..我该如何做到这一点？

解决方法使用vw表示Font-size.

h1{ Font-size : 7.5vw;}p{ Font-size : 2vw;}

演示is here.

总结

以上是内存溢出为你收集整理的如何根据屏幕大小缩放HTML中元素的大小？全部内容，希望文章能够帮你解决如何根据屏幕大小缩放HTML中元素的大小？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1083066.html

如何根据屏幕大小缩放HTML中元素的大小？

发表评论

评论列表（0条）