时间戳

首页 > 解决方案 > @media 当最大宽度更小时没有改变任何东西？

html - @media 当最大宽度更小时没有改变任何东西？

问题描述

我试图制作一个响应式标题来更改多种不同尺寸设备的字体大小，但是当使用@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。

标签： htmlcssmedia-queries

解决方案

它需要知道一个从哪里开始，另一个在哪里结束——这是由一个像素完成的，以实现平滑的响应式布局被提及。

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

@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 */

推荐阅读