Html 内嵌css的响应式web设计

Html 内嵌css的响应式web设计,html,css,Html,Css,实际上,我正在创建一个带有实际编码的电子邮件签名(用于Gmail),它在计算机网络上看起来还不错。不幸的是,手机版的签名效果不好,我想尝试媒体查询等解决方案。。但是Gmail只输入内联CSS,无法验证大纲CSS 我试着使用table,tr,td来认为table可以帮助手机自动调整,但没有效果。有人能为我推荐任何解决方案吗 <table cellpadding="0" cellspacing="0" style="margin:0; padding:0;border:0"> &

实际上,我正在创建一个带有实际编码的电子邮件签名(用于Gmail),它在计算机网络上看起来还不错。不幸的是,手机版的签名效果不好,我想尝试媒体查询等解决方案。。但是Gmail只输入内联CSS,无法验证大纲CSS

我试着使用table,tr,td来认为table可以帮助手机自动调整,但没有效果。有人能为我推荐任何解决方案吗

<table cellpadding="0" cellspacing="0" style="margin:0; padding:0;border:0">
    <tr>
        <td>
        $container1   
        <table cellpadding="0" cellspacing="0" style="margin:0;    padding:0;border:0">
            <tr>
                <td width="450">  
                    <div id="minicontainer1" style="padding: 5px 0 0 20px; height:80px;line-height:50%;box-sizing:border-box;"> 
                        <p class="font1" style="font-family: Helvetica; font-size:11pt;font-weight:bold; color:black;"> $name </p> 
                        <p class="font2" style="font-family: Helvetica; font-size:9.5pt; color:black;"> $position </p>         
                        <p class="font2" style="font-family: Helvetica; font-size:9.5pt; color:black;"> $cell </p> 
                    </div>
                    <div id="minicontainer2" style="  padding:0 0 0 20px; margin-top:-10px; line-height:50%;box-sizing:border-box;">
                        <p class="font1 diffsize" style="font-family: Helvetica; font-size:8pt; font-weight:bold; color:black;"> $company  </p>
                        <div class="font2 diffsize" style="font-family: Helvetica; font-size:8pt; color:black; line-height: 12px;"> 
                            <p> $address. </p> 
                            <p> Phone : <span id="special" style="color: #0000EE !important; text-decoration: underline;"> $telno </span> | Fax :<span id="special" style="color: #0000EE !important; text-decoration: underline;"> $faxno </span> </p>
                        </div>
                    </div> 
                </td>

$container1

$name

$position

$cell

$company

$address

电话:$telno |传真:$faxno

这只是一个很小的例子,它向你展示了我如何在所有事情上使用内联CSS。该文件包含php、html和css。引导也很可能不可用

仅用于可视化:


试试这个。我不确定是否可以使用此技术覆盖

您可以将其放入内部css或外部css中

<style>
    table {
        margin: 20px !important; // for example only
    }
</style>

桌子{
边距:20px!重要;//仅用于示例
}

放!对每个价值都很重要。这对我很有效。如果对你有帮助的话。通知我。干杯

拿出一把小提琴,这样就更容易提供解决方案。不管HTML标记有多不完整,都只是一个示例。我有义务展示整个代码预期结果是什么?您想将
微型容器
堆叠在小屏幕上吗?如果您同意其他解决方案,请执行以下步骤:1。用于创建布局2。根据需要编辑中间的代码3。向你的gmail id 4发送一封测试邮件。使用inspect元素获取代码问题在于此。因为您公开的代码没有提供足够的清晰性。可能您可以删除内容并模拟一个示例来完成您的工作。之后,您可以将其集成到实际应用程序中。对不起。。我不明白。我得准备!对于每个内联css都很重要?您应该尽量避免使用!尽可能重要的是,它使CSS变得非常复杂和难以管理,尤其是在媒体查询非常复杂的情况下involved@HarkiratSaluja关于他的项目。如果不使用,就无法覆盖内联css!重要信息或javascript。这是他能找到的最简单的解决办法。否则他应该重新创建他的web项目。使用外部接口更好。这通常用于覆盖引导值。@HarkiratSaluja不仅如此,而且如果您在电子邮件中使用样式标记,建议您使用
!重要信息
与每种样式一起使用。