我在下面为woocommerce电子邮件提供了一些代码，我需要对其进行更改以使其具有响应性。
我认为我需要将所有正文代码包装在媒体查询中，然后将其复制并更改为不同的屏幕尺寸-但我不确定如何/在何处将媒体查询放入代码中。
有人可以帮忙吗？
谢谢！
代码是-
<?php
/**
* Customer invoice email
*
* This template can be overridden by copying it to yourtheme/woocommerce/emails/customer-invoice.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce/Templates/Emails
* @version 3.5.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
<title><?php echo get_bloginfo( 'name', 'display' ); ?></title>
</head>
<body <?php echo is_rtl() ? 'rightmargin' : 'leftmargin'; ?>="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<div id="wrapper" dir="<?php echo is_rtl() ? 'rtl' : 'ltr'?>">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="padding-bottom: 30px;">
<tr>
<td align="center" valign="top">
<div id="template_header_image">
<?php
if ( $img = get_option( 'woocommerce_email_header_image' ) ) {
echo '<p style="margin-top:0;"><img src="' . esc_url( $img ) . '" alt="' . get_bloginfo( 'name', 'display' ) . '" />
</p>';
}
?>
</div>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" valign="top">
<!-- Header -->
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td id="header_wrapper" style="text-align: center;">
<img src="https://flowersforeveryone.co.za/wp-content/uploads/2019/01/61f545bd-6798-4ee7-ad4a-7482b1f9cc9a.jpg" alt="stars">
</td>
</tr>
</table>
<!-- End Header -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- Body -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="template_body">
<tr>
<td valign="top" id="body_content">
<!-- Content -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top" style="padding: 0 48px 0;">
<div id="body_content_inner">
<h3 style="text-align: center; color: #000; font-size: 26px;">LIKE IT? LOVE IT? LET US KNOW!</h3>
<p style="text-align: center;"><?php printf( esc_html__( '%s,', 'woocommerce' ), esc_html( $order->get_billing_first_name() ) ); ?> the more you share, the more you help other customers. We would love to know your thoughts on your most recent purchase and we'd appreciate it if you could take a moment to write a quick review.</p>
<div style="margin-bottom: 40px;">
<table class="td" cellspacing="0" cellpadding="6" style="width: 100%; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; border-left: none; border-right: none; border-top: 1px solid #000; border-bottom: 1px solid #000;" border="0">
<tbody>
<?php $items = $order->get_items();
foreach ($items as $item) {
$product = new WC_Product($item['product_id']);
?>
<tr>
<td><?php echo $product->get_image($size = 'shop_thumbnail'); ?></td>
<td><?php echo $product->get_title(); ?></td>
<td><a href="<?php echo $url = get_permalink($product->id).'#reviews'; ?>" style="background-color: #000; color: #fff; text-decoration: none; padding: 10px;">REVIEW NOW</a></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<h3 style="text-align: center; font-size: 16px; color: #000;"> <?php esc_html_e( 'A GREAT BIG THANK YOU FOR CHOOSING US!', 'woocommerce' ); ?> </h3>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="background-color: #000; width: 100%; text-align: center; padding-bottom: 30px; padding-top: 30px;">
<ul style="list-style: none;">
<li style="display: inline-block;">
<a href="https://www.facebook.com/FlowersForEveryoneCapeTown/">
<img src="https://flowersforeveryone.co.za/wp-content/uploads/2019/02/facebook1-1.jpg" alt="facebook" style="width: 30px;">
</a>
</li>
<li style="display: inline-block;">
<a href="https://twitter.com/LekkerFlowers">
<img src="https://flowersforeveryone.co.za/wp-content/uploads/2019/02/twitter.png" alt="twitter" style="width: 35px;">
</a>
</li>
<li style="display: inline-block;">
<a href="https://za.pinterest.com/flowersforeveryone/">
<img src="https://flowersforeveryone.co.za/wp-content/uploads/2019/02/pinterest1.png" alt="pinterest" style="width: 50px;">
</a>
</li>
<li style="display: inline-block;">
<a href="https://www.instagram.com/flowersforeveryone_capetown/">
<img src="https://flowersforeveryone.co.za/wp-content/uploads/2019/02/instagram-e1550236047845.png" alt="instagram" style="width: 30px; ">
</a>
</li>
</ul>
<p style="color: #fff;">WE PRIDE OURSELVES IN PROVIDING THE FRESHEST AND MOST DAZZLING, <br>
YET AFFORDABLE FLOWER BOUQUETS TO THE MOTHER CITY AND SURROUNDS!
</p>
<p style="color: #fff;">GOT A QUESTION? WE'D LOVE TO HEAR FROM YOU! <br>
SEND US AN EMAIL AND WE'LL RESPOND AS SOON AS POSSIBLE.
</p>
<a href="emailto:hello@flowersforeveryone.co.za" style="color: #fff;">hello@flowersforeveryone.co.za</a>
<p style="color: #fff;">© <?php date('Y'); ?> Flowers for Everyone. All Rights Reserved</p>
</div>
</body>
</html>