放置媒体查询的最佳方法 [英] 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屋！