使用媒体查询按屏幕大小调整文本大小
Posted
技术标签:
【中文标题】使用媒体查询按屏幕大小调整文本大小【英文标题】：Using Media Queries to resize text by screen size 【发布时间】：2021-10-23 01:38:37 【问题描述】：我正在尝试使用媒体查询根据屏幕大小调整导航文本的大小。尺寸显示为 30px，较小的屏幕尺寸，但当屏幕很大时，它仍然是 30px。以下是我的代码：
html：
<div class="nav">
<a class="logo" style="cursor: pointer">LIT</a>
<div class="sidebar" id="active">
<a style="cursor: pointer;" id="projectLink">samples </a>
<a style="cursor: pointer;" id="aboutLink">services </a>
<a style="cursor: pointer;" id="blogLink">tweets </a>
<a style="cursor: pointer;" id="contactLink" class="mail" onclick="openForm()">contact</a>
</div>
SCSS：
.sidebar
z-index: 1;
font-weight: bolder;
margin-left: auto;
margin-right: 0px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
font-family: 'Raleway', sans-serif;
color: black;
/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px)
.sidebar
font-size: 80px;
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px)
.sidebar
font-size: 30px;
【问题讨论】：
【参考方案1】：您将.sidebar 包裹在另一个.sidebar 中
把它们拿出来会有帮助：
<!DOCTYPE html>
<html>
<head>
<style>
.sidebar
z-index: 1;
font-weight: bolder;
margin-left: auto;
margin-right: 0px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
font-family: 'Raleway', sans-serif;
color: black;
/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px)
.sidebar
font-size: 80px;
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px)
.sidebar
font-size: 30px;
</style>
</head>
<body>
<p class="sidebar">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>
</body>
</html>【讨论】：
以上是关于使用媒体查询按屏幕大小调整文本大小的主要内容，如果未能解决你的问题，请参考以下文章