放置媒体查询的最佳方式 [英] Best Way To Place Media Queries

问题描述

在 HTML 中放置媒体查询的最佳方式是什么?

What is the best way to place media queries in HTML?

1. 在同一个 CSS 文件中，例如:

1. In same CSS file like:

.my-text {
  font-size: 30px;
}

@media only screen and (max-width : 768px) {
   .my-text {
     font-size: 24px;
    }
}

.my-img {
  width: 100%;
}

@media only screen and (max-width : 768px) {
   .my-img {
     width: 80%;
    }
}

{more styles...}

@media only screen and (max-width : 768px) {
   {more styles...}
}

或者在相同的 CSS 中但像:

Or in same CSS but like:

.my-text {
  font-size: 30px;
}

.my-img {
  width: 100%;
}

{more code....}

@media only screen and (max-width : 768px) {
   .my-text {
     font-size: 24px;
    }

   .my-img {
     width: 80%;
    }

    {more code...}
}

或者我应该使用如下媒体查询在 HTML head 标签中使用不同的样式表:

Or should I use different stylesheets in HTML head tag using media query like:

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="small.css">

我正在学习网页设计，但我有点困惑，这会很好用..

I'm learning web designing but I'm a bit confused which will work fine..

推荐答案

最简短的答案是:这取决于您要实现的目标.

The shortest answer is: it depends what you're trying to achieve.

第一个选项在文件大小和可读性方面最差，因为将每个 @media 规则加倍会使所有规则变得更长并且难以有效调试.

The first option is the worst in terms of file size and readability because of doubling every @media rule makes all the rules longer and hard to effectively debug.

第二个选项(一个 CSS 文件，所有特定于媒体的规则分组在每个媒体类型的一个 @media 块下)是最好的，当规则在添加内容方面相互重叠时来自另一个 @media 块的值.在这种情况下，与将多个单独的 CSS 文件下载到任何匹配的 @media 相比，这对 SEO 更友好且更经济(通过请求数量).

The second option (one CSS file with all media-specific rules grouped under one @media block per media type) is the best when there are rules which overlaps each other in terms of adding something to values coming from the other @media block. In this case this would be more SEO-friendly and economical (by means of number of requests) than downloading several separate CSS files to any matched @media.

当 @media 分类器彼此完全不重叠时，第三个选项是最有效的(因为它会导致每次页面加载下载的文件更小，并且只有一个 CSS 文件是一次加载.如果你有一些 CSS 文件用于每个设备的不同布局，这将是最好的方法，而每个设备分辨率只需要一个 - 即一个用于低于 320 的水平分辨率，一个用于 320-720，一个用于720以上，印刷专用.

The third option is the most effective when @media classifiers don't overlap with each other at all (because it results in a smaller file to download per page load, and only one CSS file is loaded at a time. This would be the best way to go if you have some CSS files for different layouts per device, while only one is needed per device resolution - i.e. one for horizontal resolutions below 320, one for 320-720, one for 720 upwards and one specifically for printing.

这篇关于放置媒体查询的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！