响应式网页设计与内联css

时间:2016-08-23 09:28:30

标签: html css

我实际上正在创建一个带有实际编码的电子邮件签名(For Gmail),它在计算机网络上看起来很不错。遗憾的是,移动版的签名效果并不理想,我想尝试媒体查询等解决方案。但Gmail只输入 INLINE CSS ,无法验证大纲CSS < / strong>。

我尝试使用table,tr,td认为该表有助于在移动设备中自动调整但无济于事。有人能为我推荐任何解决方案吗?

<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>

这只是它的一个小例子,并向我们展示我如何使用Inline CSS。该文件有php,html和css。 Bootstrap很可能也不可用。

仅用于可视化:

web

mobile

1 个答案:

答案 0 :(得分:1)

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

你可以将它放在内部css或外部css中。

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

把!重要的放在每一个值上。这对我很有用。如果它对你有所帮助提醒我。干杯!