Question

我正在尝试制作一个响应头，以更改多种不同尺寸的设备的字体大小，但是当使用@Media屏幕和（最大宽度：X px）时，它不会做我适用的任何更改。我的代码

@media screen and (max-width: 690px)
{
    .container
    {
        width: 100%;
    }
    #header
    {
        width: 100%;
        right: 0%;
    }
	#header h1
	{
		display: none;
	}
    #nav a 
	{
    float: none;
    display: block;
    text-align: center;
  	}
  #nav-right 
	{
    float: none;
  	}
  #nav:before 
	{
    display: block;
    position: absolute;
    top: 10px;
	right: 0%;
    line-height: 40px;
    font-size: 21px;
    cursor: pointer;
	}
	#nav:after
	{
	position: absolute;
  	right: 0;
  	top: -15px;
 	height: 60px;
	}
}
@media screen and (max-width: 509px)
{
	#nav
	{
		font-size: 16px; 
	}
}

@media screen and (max-width: 409px)
{
	#nav
	{
		font-size: 8px;
	}
}

我只希望它更改字体大小，但是由于某种原因它不起作用，请帮忙谢谢 W。

Answer 1

它需要知道一个在哪里开始，另一端在哪里-这是由一个像素完成的，以实现平滑的响应式布局。我通常发现从小尺寸开始更容易工作，因为小尺寸从零像素宽开始，因此没有最小值宽度需要提及。

我将重新排列您的媒体查询从窄到宽的顺序：

@media screen and (max-width: 409px)
{
	#nav
	{
		font-size: 8px;
	}
}
   
/* now I'm going to put a min width on this so that it knows it's range does NOT start at zero and won't clash with the previous media query */

/* notice this is 1px bigger than the previous max-width */

@media screen and (min-width: 410px) and (max-width: 509px)
{
	#nav
	{
		font-size: 16px; 
	}
}

/* now I'm going to put a min width on this so that it knows it's where it's range does NOT start at zero and won't clash with the previous media queries */

/* notice this is 1px bigger than the previous max-width */

 @media screen and (min-width: 510px) and (max-width: 690px)
{
    .container
    {
        width: 100%;
    }
    #header
    {
        width: 100%;
        right: 0%;
    }
	#header h1
	{
		display: none;
	}
    #nav a 
	{
    float: none;
    display: block;
    text-align: center;
  	}
  #nav-right 
	{
    float: none;
  	}
  #nav:before 
	{
    display: block;
    position: absolute;
    top: 10px;
	right: 0%;
    line-height: 40px;
    font-size: 21px;
    cursor: pointer;
	}
	#nav:after
	{
	position: absolute;
  	right: 0;
  	top: -15px;
 	height: 60px;
	}
}

/* and there you have it */

Answer 2

您是否已在HTML文件中添加了视口？如果没有，那么在头部添加视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 3

这是解决您的问题的方法，该问题是在屏幕尺寸更改时应用媒体查询。我编写了代码示例，只是为了说明针对不同屏幕尺寸应用媒体查询的格式：

  body {
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
     }

     .footer_class{
        position: fixed;
        bottom: 0;
        background: #dfdfec;
        width: 100%;
        text-align: center;
     }

     .header_class {
        position: fixed;
        top: 0;
        background: #dfdfec;
        width: 100%;
        text-align: center;
     }

    /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

    /* Portrait and Landscape */
    @media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) {

        .title {
           font-size:14px;
        }

    }

    /* ----------- iPhone 6, 6S, 7 and 8 ----------- */

    /* Portrait and Landscape */
    @media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) { 

        .title {
           font-size:20px;
        }

    }

<DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
<body>
    <Header class="header_class">
     <h1 class="title">Header Section</h1>
    </Header>
    <article>
       <p>Content Section</p>
    </article>

    <footer class="footer_class">
       <h1 class="title">Footer Section</h1> 
    </footer>
</body>
</html>

让我们将您的媒体查询细分为两部分： @仅媒体屏幕 这意味着我们将css样式应用于具有屏幕的设备。关键字仅在此处用于隐藏旧版浏览器的样式表，以免查看电话样式表。

和（最小设备宽度：320像素）和（最大设备宽度：568像素） 这很明显，因为这意味着仅当设备的屏幕尺寸最小为320px，最大宽度为480px时，才应用指定的CSS。

我希望这可以帮助您解决问题。

当最大宽度较小时，@ media不会更改任何内容？

3 个答案: