对整个 CSS 使用 @media

如何解决对整个 CSS 使用 @media

为了更好地理解@media，我输入了我所有的 css 代码。为了使我的网站具有响应性，我使用 @media... 这是否意味着我的 CSS 代码长度将翻倍，因为我的所有代码都将进入@media？

基本上我必须复制和粘贴我的代码并再次编辑每个元素以使其具有响应性？

解决方法

是的，在媒体查询下，您只需要像这个（复制的）示例中那样编写要更改的属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
</head>

<style>

  h1{
    font-size:100px;
    color:red;
    background:black;
  }  
  @media(max-width:500px){
    h1{
      font-size:50px;
    }
  }
</style>



<body>
  
  
  <h1>Media Query Example</h1>

</body>
</html>

不是这样的，你不必在@media(){}下重新写所有的样式，如果你用不包括媒体查询的样式调整窗口大小，所有样式仍然在那里，唯一的事情会发生一些内容可能会溢出，或者对于较小的屏幕，我们需要较小的字体大小或较小的图像大小类似的东西，所以我们只需为我们想要为某些特定大小的屏幕更改的特定元素添加样式。为了更好地理解这一点，这里有一个例子，

var3 := var1 + " " + var2

尝试运行上面的代码段，看看屏幕大小小于或等于 500 像素时，文本大小如何变化。在这里你可以看到在媒体查询下的样式标签下，我只应用了字体大小，其他两个属性，即背景和颜色是继承的。

没有。双重代码结构不是一个好主意。

@media 的机制非常简单。带有 @media 的样式具有更高的特异性并且没有覆盖样式。并且 @media min-width: 800px 比 800px 更具体地用于从 @media min-width 500px 开始的屏幕，并覆盖第二个设置的样式。

知道您能够组织您的 css。

没有运行演示示例来解释这个想法：


// first common code for all elements
// should work on mobile phones (= mobile first)

div {

   // stylings for all views
   // that's most off your code
   // positions,colors,general structure-settings,font-styling (without sizes) ...
   font-family: sans-serif;
   color: gray;
   background: white;
   border: 1px solid yellow;
   position: relative;
   float: left;
   ...
   ...
   ... and anything else

   // stylings working on mobile
   // will be overwritten to other views
   // that are almost sizings
   width: 100% // = only one column on mobiles
   padding: 4px; // = small on mobile
   font-size: 9px;
   line-height: 11px;  
   ...   
}

// now overwrite only the classes which changes for tablets
@media(min-width: 768px) {
   div {
      width: 50%; // = 2 columns on tablet
      padding: 8px;
      font-size: 11px;
      line-height: 14px;
   }
}

// now overwrite only the classes which changes for smaller desktops
@media(min-width: 992px) {
   div {
      width: 25%; // = 4 columns on tablet
      padding: 15px;

      // note: font-size and line-height doesn't change
      // same as on tablets

   }
}

// do that for every breakpoint you need
// i.e. add large/wide screens 
// i.d. add tablet portrait landscape between tablet and desktop smaller screens
// ...

典型的使用断点：

注意：并非每个项目都需要所有断点
简单/更容易的项目使用，即：
X-Small、Medium、Large

...取决于您的设计以及为该项目保留的工作量

X-Small (i.e. mobile portrait)
Small   ≥576px   (i.e. mobile landscape)
Medium  ≥768px   (i.e. tablets)
Large   ≥992px   (i.e. small desktop,tablets landscape)
Extra large  ≥1200px   (up from here wide screen with hgh resolution,HD,4 HD,...)
Extra extra large  ≥1400px

更新：添加了典型的断点。