Responsive HTML text/images in Outlook365, gmail, etc-CodePudding

I have a PowerShell script that creates a single HTML file, email.html, with inline CSS and embedded base64 images.. then sends it daily to me (my website reports).

I want ALL (text/images) that are in the body of the email to resize automatically based on the width of the email client viewable area. Admittedly, I have limited experience in HTML/CSS. Could someone please tell me what I'm doing wrong in my example below? NOTE: I truncated the base64 text in the example below so it doesn't take up too much space in my example.

I'd appreciate a fully working example I can try to learn from.

<!doctype html>
<html>

<head>
<style type="text/css">
    @media screen and (max-device-width:640px),
    screen and (max-width:640px) {
        .responsivetext {font-size: 2vw !important;width:auto;height:auto;vertical-align:middle}
    }
</style>

</head>

<body>
    <td style="font-family: Arial;" >I have tried everything.  Why wont this text resize when resizing Outlook 2016?</td>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAIEAIAAADwyk6cAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0T...." />
</body>

</html>

CodePudding user response：

I've been dealing with this situation too. It is very difficult to achieve success in all options.

Outlook does not really have any solid support for media queries unfortunately and is often 'left out' when it comes to mobile responsive emails. Can media queries be used in Outlook

I suggest to you here you can create responsive html design and examine it.