html - 如何使用@Media 查询

标签 html css email html-email

我正在创建一个电子邮件模板,我正试图让它响应现在我遇到了一个问题,我一直在研究使用 "@media"标签,但电子邮件不太喜欢<style>所以我真的不确定该怎么做。

<body>
 <table>
  <table>
   <tr>
    <td>
     text blah blah
    </td>
   </tr>
  </table>
<!-- This is the one I was responsive (The one below) -->
  <table>
   <tr>
    <td>
      Make this table responsive <3
    </td>
   </tr>
  </table>
 </table>
</body>

P.S,我不需要顶部响应,所以我怎样才能将第二个链接到 CSS

我有我所有的表格,桌面设计看起来很完美'例如,div 和表格是“%”而不是“px”,当它缩小到移动设备时,我有 2 个相邻的 div,它们仍然是 50%浏览器屏幕(50% 的移动和桌面),但当它们缩小时,我希望它们成为 100% 的移动屏幕

最佳答案

<head>
    <style>
        @media only screen and (max-width: 771px) {
            /*add your class and code here*/
        }
    </style>
</head>

关于html - 如何使用@Media 查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31702168/

相关文章:

php - 从 php 表单发送 Gmail

html - 为任何类型的 HTML 元素键入自定义 useRef Hook

html - Internet Explorer 不会增加非同级 <li> 元素的数量

html - 在 div 响应式 CSS 中制作图像

css - Rails : Assets/stylesheets/application. scss 格式未应用于 View

javascript - HTML标签<audio>在不同浏览器中的表现

email - golang & postfix - 收到的电子邮件 header 是本地主机

java - Gmail Api - 搜索更新时间超过几分钟的电子邮件

html - 如何使用位置 :relative 在 html 中绘制垂直线

html - 定位图片替代文字