我对CSS样式表感到困惑是处理HD和UHD监视器的正确程序。
目前我的CSS样式表使用文字像素值作为各种宽度的宽度。然后，当它是这样打印时，它会覆盖其中一些宽度为100％。
现在这是完整的CSS：
update1但如果用户显示器是UHD，则效果不佳。所以我开始玩了：
<style type="text/css">
body {
width: 680px;
margin: 0 auto;
font-family: Calibri, "Calibri Light", Arial, SansSerif;
background: #666666;
}
table{
border-collapse:collapse;
}
table tbody tr:hover td {
color:#000;
background:#efefef;
}
.page{
width: 680px;
background: #FFFFFF;
padding-left: 2mm;
margin-left:auto;
margin-right:auto;
}
.textChairman {
overflow: hidden;
background: #FF00FF;
text-align: right;
color: #FFFFFF;
}
.floatTextLeft {
float: left;
text-align: left;
}
.floatTextRight {
float: right;
text-align: right;
}
.textUppercase {
text-transform: uppercase;
}
.textDate {
text-transform: uppercase;
font-size: 10pt;
color: #FFFFFF;
padding-left: 1mm;
}
.textWeeklyBibleReading {
text-transform: uppercase;
font-size: 10pt;
font-weight: 700;
color: #FFFFFF;
}
.cellDate {
border-style: none none solid none;
background-color: #FF00FF;
border-bottom-color: #d3d3d3;
}
.borderDotCell {
border-color: #000000;
border-style: none none solid none;
border-width: 1px;
background-color: #FF00FF;
}
.tableOuter {
border-width: 0px;
width: 670px;
}
.tableOuter tr td {
vertical-align: top;
}
.borderDotDateRow {
border-color: #d3d3d3;
border-style: none none solid none;
border-width: 1px;
background-color: #28456c;
}
.containerDateWeeklyBibleReading {
float: left;
background: #28456c;
}
.borderDot {
border-color: #d3d3d3;
border-style: none solid solid none;
border-width: 1px;
font-size: 10pt;
}
.borderDotTheme {
border-color: #d3d3d3;
border-style: none solid solid none;
border-width: 1px;
font-size: 10pt;
width: 480px
}
.borderDotTheme2Classes {
border-color: #d3d3d3;
border-style: none solid solid none;
border-width: 1px;
font-size: 10pt;
width: 360px;
}
.borderDotTheme3Classes {
border-color: #d3d3d3;
border-style: none solid solid none;
border-width: 1px;
font-size: 10pt;
width: 240px;
}
.borderDotClass {
border-color: #d3d3d3;
border-style: none solid solid none;
border-width: 1px;
font-size: 10pt;
width: 120px;
text-align: center;
}
.borderDotName {
border-color: #d3d3d3;
border-style: none solid solid none;
border-width: 1px;
font-size: 10pt;
width: 120px;
text-align: center;
}
.borderDotTime {
border-color: #d3d3d3;
text-align: right;
border-style: none solid solid solid;
border-width: 1px;
font-size: 10pt;
width: 60px;
}
.borderDotSong {
border-color: #d3d3d3;
border-style: none solid solid solid;
border-width: 1px;
font-size: 10pt;
font-weight: 700;
}
.borderDotMeetingNotes {
border-color: #d3d3d3;
border-style: none solid solid solid;
border-width: 1px;
font-size: 10pt;
}
.borderDotSpecialEvent {
border-color: #d3d3d3;
border-style: none solid solid solid;
border-width: 1px;
font-size: 10pt;
text-align: center;
}
.borderDotSpecialEventLocation {
border-color: #d3d3d3;
border-style: none solid solid solid;
border-width: 1px;
font-size: 10pt;
text-align: center;
}
.textStyle {
font-size: 10pt;
}
.containerChairman {
overflow: hidden;
background: #28456c;
text-align: right;
color: #FFFFFF;
font-size: 10pt;
}
.containerDate {
margin-bottom: 2mm;
}
.textSongTitle {
/* comment this out to show the song title text */
/* display: none; */
}
.textMethod {
/* comment this out to display the method text */
/* display: none; */
}
.textMaterial {
/* comment this out to display the student material text */
/* display: none; */
}
.textCongregationBibleStudyMaterial {
/* comment this out to display the CBS material text */
/* display: none; */
}
.containerTitle {
margin-top: 2mm;
margin-bottom: 2mm;
width: 670px;
font-size: 14pt;
font-weight: bold;
text-align: center;
}
.containerTitlePageBreak {
margin-top: 2mm;
margin-bottom: 2mm;
width: 670px;
font-size: 14pt;
font-weight: bold;
text-align: center;
page-break-before:always;
}
.textTitleDate {
font-size: 12pt;
}
.containerTFGW {
width: 670px;
margin-bottom: 2mm;
}
.textTFGW {
font-size: 10pt;
text-transform: uppercase;
background-color: #606a70;
width: 300px;
color: #FFFFFF;
padding-left: 1mm;
}
.gapToTwoClasses {
border-style: none solid solid none;
border-width: 1px;
border-color: #d3d3d3;
}
.containerTFGWcell {
border-style: none none solid none;
border-width: 1px;
border-color: #d3d3d3;
}
.containerAYFM {
width: 670px;
margin-bottom: 2mm;
}
.containerAYFMcellNoExtraClasses {
border-style: none none solid none;
border-width: 1px;
border-color: #d3d3d3;
}
.containerAYFMcell {
border-style: none solid solid none;
border-width: 1px;
border-color: #d3d3d3;
}
.textAYFM {
font-size: 10pt;
text-transform: uppercase;
background-color: #c18626;
width: 300px;
color: #FFFFFF;
padding-left: 1mm;
}
.cellAYFMMainHall {
border-style: solid solid solid none;
border-width: 1px;
border-color: #d3d3d3;
font-size: 10pt;
text-align: center;
}
.cellAYFMAuxClass1 {
border-style: solid solid solid none;
border-width: 1px;
border-color: #d3d3d3;
font-size: 10pt;
text-align: center;
}
.cellAYFMAuxClass2 {
border-top-style: solid;
border-right-style: solid;
border-left-style: none;
border-bottom-style: solid;
border-width: 1px;
border-color: #d3d3d3;
font-size: 10pt;
text-align: center;
}
.containerLAC {
width: 670px;
margin-bottom: 2mm;
}
.containerLACcell {
border-style: none none solid none;
border-width: 1px;
border-color: #d3d3d3;
}
.textLAC {
font-size: 10pt;
text-transform: uppercase;
background-color: #961526;
width: 300px;
color: #FFFFFF;
padding-left: 1mm;
}
.containerMeeting {
width: 100%;
padding-bottom: 0mm;
margin-bottom: 3mm;
}
/*------------------------------------------**
** Prefix "demo" with newline character **
**-----------------------------------------*/
.textDemoNewlinePrefix {
}
/*------------------------------------------**
** Demo prefix text **
**-----------------------------------------*/
.textDemoPrefix {
}
/*------------------------------------------**
** Demo description text **
**-----------------------------------------*/
.textDemoDescription {
}
/*------------------------------------------**
** Demo brother text (publisher, **
** householder, interview 3) **
**-----------------------------------------*/
.textDemoBrother {
}
/*------------------------------------------**
** Demo "[" and "]" text **
**-----------------------------------------*/
.textDemoBracket {
}
/*------------------------------------------**
** Demo "," text **
**-----------------------------------------*/
.textDemoComma {
}
/*------------------------------------------**
** Demo " - " text **
**-----------------------------------------*/
.textDemoHyphen {
}
/*------------------------------------------**
** Demo " / " text **
**-----------------------------------------*/
.textDemoSlash {
/*Uncomment to hide the slash character*/
/*display:none;*/
}
.containerWeekend {
width: 670px;
margin-bottom: 2mm;
}
.containerWeekendHeadingcell {
border-style: none none solid none;
border-width: 1px;
border-color: #d3d3d3;
background-color: #8b8378;
font-size: 10pt;
}
.containerWeekendChairmancell {
border-style: none none solid none;
border-width: 1px;
border-color: #d3d3d3;
background-color: #8b8378;
font-size: 10pt;
text-align:right;
}
.textWeekend {
text-transform: uppercase;
padding-left: 1mm;
}
.borderWeekend
{
font-size: 10pt;
border-width: 1px;
border-style: solid;
border-color: #d3d3d3;
}
.textPTSLabel{
font-weight: 700;
font-size: 10pt;
}
.textPTSValue{
font-size: 10pt;
}
@media print {
body, .tableOuter, .page, .containerTitle, .containerMeeting, .containerTFGW, .containerAYFM, .containerLAC, .textTFGW, .textAYFM, .textLAC, .containerWeekend {
width: 100%;
}
body {
background-color: #FFF;
}
.page {
padding-left: 0px;
}
/* 100 / 680 = 0.15 approx. We use this to work out the % values. */
.borderDotTheme {
width: 72%;
}
.borderDotTheme2Classes {
width: 54%;
}
.borderDotTheme3Classes {
width: 36%;
}
.borderDotClass, .borderDotName {
width: 18%;
}
.borderDotTime {
width: 9%;
}
.containerMeeting {
width: 99%;
}
} </style>
在FireFox中，我可以使用CTRL + SHIFT + M来模拟UHD分辨率。它有效。
但是你可以从我的CSS中看到我使用这些文字像素宽度并且它一直运行良好。
我真的不想在CSS脚本中不断地进行这些检查，以使其正常工作。
那么处理这个问题的正确方法是什么？
感谢。