所以我需要通过媒体查询来更改特定的td元素字体大小。
免责声明***是的我知道内联样式很糟糕但我必须将它们用于这项工作
我有两个类.tbold和.tnormal用于元素，我想在页面时更改字体大小，因为移动大小，例如320像素。我知道如果我只是使用普通的类系统或像bootstrap这样的东西，但是在使用表时我不知道如何做到这一点
这是我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audi MK Advert</title>
<style>
@font-face {
font-family: 'audibold';
font-style: normal;
font-weight: bold;
src: url('helper-files/fonts/AudiBold.otf') format('opentype');
}
@font-face {
font-family: 'audinormal';
font-style: normal;
font-weight:normal;
src: url('helper-files/fonts/AudiNormal.otf') format('opentype')
}
@media all and (max-width: 500px) and (min-width: 320px) {
table {
#tnormal {
font-size: 10px;
}
}
}
</style>
</head>
<body>
<!-- Audi Logo Top Right -->
<table style="float:right";
display:block;
margin-bottom: 10px>
<tr>
<td>
<img src="helper-files/imgs/logo.png">
</td>
</tr>
</table>
<br>
<br>
<!-- Grey Navbar -->
<table style="margin:auto">
<tr style="display:block; background-color:#858585">
<td><img src="helper-files/imgs/navbutton2.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton3.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton4.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton5.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton6.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton1.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton7.jpg" style="margin-bottom: 5px"></td>
</tr>
</table>
<!-- Audi Large Photo -->
<table style="width:100%">
<tr>
<td style=align:"center"><img src="helper-files/imgs/header.jpg" style="width:100%"></td>
</tr>
</table>
<!-- Body of text -->
<table style="background-color: lightgray; padding-bottom: 20px; color:grey">
<tr>
<td style="font-weight:bold; padding-bottom:15px; padding-top: 35px; font-size:35px; padding-left: 15px; padding-right: 15px;font-family: audibold">Whats in the name?</td>
</tr>
<tr>
<td class="tbold"; style="padding-bottom:15px; font-weight:bold; padding-right: 15px; padding-left: 15px; font-family: audibold">To reflect Ridgeway’s acquisition by Marshall Motor Holdings plc in May of this year, effective from the 1st of November, we have rebranded to Marshall.</td>
</tr>
<br>
<tr>
<td style="padding-bottom:15px; padding-left: 20px; padding-right: 15px; font-family: audinormal">Don’t worry – it’s not all change. Our excellent staff, standards and values will remain the same, ensuring that you receive consistently high levels of service.</td>
</tr>
<br>
<tr class="tnormal">
<td style="padding-bottom:15px; padding-left: 20px; padding-right: 15px; font-family: audinormal">The largest expansion acquisition that Marshall Motor Group has made to date, we are now part of a group that operates 103 franchise dealership businesses representing 24 different manufacturer brands across 25 counties in England, with
a turnover in excess of £2.1bn per annum and 3,500 colleagues; but you, the customer, are still our Number One!</td>
</tr>
<br>
<tr class="tnormal">
<td style="padding-bottom:15px; padding-left: 20px; padding-right: 15px; font-family: audinormal">With Marshall Motor Group (who are the 7th largest UK motor group in the UK), we are in a better position than ever to exceed expectations and adopt 106 years of dedicated Marshall expertise, with customer care and impeccable industry
knowledge at the heart of everything we do.</td>
</tr>
<br>
<tr class="tnormal">
<td style="padding-bottom:15px; padding-left: 20px; padding-right: 15px; font-family: audinormal">Just like always, we’re with you for the road ahead. Welcome to the next destination of our exciting journey. As part of the rebrand <a href="http://www.marshall.co.uk/" style="text-decoration:none; color:black; font-weight: bold;">ridgeway.co.uk</a> will redirect to our new online home of <a href="http://www.marshall.co.uk/" style="text-decoration:none; color:black; font-weight: bold">marshall.co.uk</a> for all things Audi sales, service
and parts!</td>
</tr>
<tr class="tnormal">
<td style="font-weight:bold; font-size:35px; padding-left: 15px; padding-right: 15px; font-family: audibold">Marshall</td>
</tr>
<tr class="tnormal">
<td style="font-weight:bold; font-size:35px; padding-left: 20px; padding-right: 15px; font-family: audibold">The new name for Audi in Oxford and Newbury.</td>
</tr>
</table>
<!-- Red Labels -->
<table style="padding:20px; margin: auto">
<tr style= "display: block">
<td><img src="helper-files/imgs/visit.jpg"></td>
<td><img src="helper-files/imgs/about.jpg"></td>
<td><img src="helper-files/imgs/contact.jpg"></td>
<td><img src="helper-files/imgs/livechat.jpg"></td>
</tr>
</table>
<hr>
</body>
</html>
答案 0 :(得分：0)
table {
#tnormal {
font-size: 10px;
}
}
你这里没有使用SASS，对吧？这不起作用。使用：
table .tnormal {
font-size: 10px !important;
}
并改变＃34;＃id＆＃34;到＆＃34; .class＆＃34;