How would I go about having my text be bigger, so my text goes to the bottom of the tab (without a scrollbar showing up or anthing) and when the tab gets smaller, make the font smaller.
h1 {
font-size: ?;
}
div {
length: according to browser;
}
CodePudding user response:
You can use height: 100vh;
to set height according to screen height, and for font-size you can use @media queries
to set font size for different screen.
body {
margin: 0px;
padding: 0px;
}
div.box {
height: 100vh;
background-color: #666;
}
h1 {
font-size: 50px;
color: #ffffff;
margin: 0px;
padding: 30px;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
h1 {
font-size: 25px;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
h1 {
font-size: 35px;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
h1 {
font-size: 45px;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
h1 {
font-size: 55px;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
h1 {
font-size: 65px;
}
}
<div >
<h1>Karar Barcha</h1>
</div>
CodePudding user response:
You can use vw
for font-size
if you want to be changed size by resizing of browser:
However, using vw
for elements such as text means you may want to use media-queries
for mobile devices to avoid very small text, such as the <p>
element.
h1 {
font-size: 4vw;
}
<body>
<h1>arman ebrahimi</h1>
</body>