如何管理CSS3媒体查询?

前端之家收集整理的这篇文章主要介绍了如何管理CSS3媒体查询?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
由于有很多方法来实现CSS3媒体查询到网站,我想知道哪一个是由更多经验丰富的网页设计师推荐。我可以想到一对夫妇:

1.所有在一个样式表

有一种适用于所有屏幕宽度的默认样式,以及仅适用于较低屏幕宽度并覆盖默认值(仅限一个文件)的媒体查询。例如:

HTML

<link rel="stylesheet" href="main.css">

main.css

article
{
    width: 1000px;    
}

@media only screen and (max-width: 1000px)
{
    article
    {
        width: 700px;
    }

}

(请记住,这只是一个例子)

优点:

>默认样式适用于旧版浏览器
>只需要一个HTTP请求

缺点:

>获取很多代码乱码
>有些浏览器必须下载他们不会应用的代码

2.单独的样式表

有单独的样式表,包含为每个屏幕宽度定制的完整代码。浏览器只加载应用的浏览器。例如:

HTML

<link rel="stylesheet" href="large-screen.css" media="screen and (min-width: 1001px)"> /*Also older browsers*/
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1000px)">

大屏幕

article
{
    width: 1000px;
}

small-screen.css

article
{
    width: 700px;
}

优点:

>整洁有组织
>只需要一个HTTP请求
>浏览器只加载他们需要的

缺点:

>(这就是为什么我犹豫使用这个:)当一个更改适用于所有的屏幕宽度,更改必须复制并粘贴到所有样式表中的适当位置。

3.单独的样式表,一个全局样式表

与#1相同,但全局样式和媒体查询位于单独的样式表中。例如:

HTML

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1300px)">

main.css

article
{
    width: 1000px;
}

small-screen.css

article
{
    width: 700px;
}

优点:

>也整洁,可管理
>进行全局更改时没有#2的问题
>全局样式适用于旧版浏览器

缺点:

>较小的屏幕宽度需要2个HTTP请求

这就是我能想到的。如何管理媒体查询

感谢任何回应。

解决方法

嗯,我当然不能声称是一个权威的事情(我还在学习编码惯例自己),但我实际上倾向于选项#1 – 一个单一的样式表。我正在想一个具体的实现它,虽然。而不是为每个屏幕尺寸的情况下有一个单一的断点,你需要新的样式,我建议多个断点 – 一个为每个模块的CSS样式,需要解决多个屏幕尺寸。

啊…这可能是一个有点混乱的声明。一个例子是为了…

而不是像:

/*default styles:*/
/*header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate styles for smaller screens:*/
@media only screen and (max-width: 1000px){
    /*header styles*/
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }

    /*content styles*/
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }

    /*footer styles*/
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

我建议选项#1,刚实现如此:

/*default header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*alternate header styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }
}

/*default content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*alternate content styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }
}

/*default footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate footer styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

(所有的类都是占位符,我不是很有创意…)

虽然这意味着您将多次执行相同的媒体查询声明(导致更多的代码),但是它对测试单个模块更加方便,这将有助于您的网站的可维护性越来越大。尝试添加多个真正的样式,更多的标签/类/ id的例子,我给了,或许添加一些空格给他们,你会看到很快看到更快的缩小和更改/追加样式所有屏幕尺寸)在示例的第二部分所示的实现中。

我相信这个答案完全相信来自CSS的可扩展和模块化架构的信息,Jonathan Snook。 (毕竟,像我这样的初学者没有办法能够找出和解释一个像所有的答案自己!)从该书的许多相关部分之一引用,

“…instead of having a single break point,either in a main CSS file or in a seperate media query style sheet,place media queries around the module states.”

虽然,如果通过个人偏好或其他你宁愿不使用这种方法,那么你可以自由地去与任何其他选择你提出 – 毕竟,Snook自己说,他的书“是更多的风格指导比刚性框架“,所以不要觉得这是一个编码标准。 (虽然我觉得应该是XD)

猜你在找的CSS相关文章