在将我的主要css重构为模块化方法时,我使用@media all {}在集成开发环境中包装css模块。这种方法使得扫描文件内容变得更加容易,因为我们现在还不能使用像less或sass这样的预处理器。
我唯一担心的是,所有这些媒体查询(每个css模块/一组连贯的选择器都有一个)可能会在呈现站点时造成性能影响。我不关心我们的css文件的文件大小,因为这是一个纤细的模块化css框架和适当的压缩的一个小问题。
如果频繁使用,像@media all {}这样的媒体查询是否会对(台式机和移动/其他)设备的性能产生影响?
我有一些问题,编写媒体查询,以使我的网站响应。为了保持一切整洁,我在一个单独的文件(mobile.css.scss)中编写了移动样式表,如下所示:
@media (min-width: 340px) and (max-width: 767px){
/* hide desktop only code and display mobile elements */
.menu{display: none;}
.banner-desktop{display: none;}
.banner-mobile{
display: block !importa
似乎CSS只能识别第一个媒体查询。每当我改变屏幕大小以看到不同的变化时,它只“落入”第一个媒体查询或一般的CSS代码。
我尝试将媒体查询移动到工作查询的上方和下方,但没有任何改变。在查询中,我将几种颜色更改为黑色,以便测试它们是否真的有效,但这并没有改变任何东西。
这是我的媒体查询布局的一个示例。
*** REST OF CSS FILE UP HERE ***
@media screen and (max-width: 600px) {...}
@media screen and (max-width: 600px) {...}
@media only screen and (min-
我遇到了麻烦:
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only