Как сохранить масштаб страницы 1: 1 при печати

Question

Это очень раздражает, как работает адаптивный стиль. Я провел множество исследований с различными стилями высоты и ширины, но ни один из них, кажется, не делает то, что я хочу.Так что теперь я думаю, что лучше спросить.

Есть ли способ поместить мой код в контейнер, чтобы при настройке размера экрана или печати он сохранялся в масштабе 1: 1?

Вот как это выглядит на моем мониторе в полном размере - Полноразмерная компоновка

Вот как выглядит представление "Печать" - Распечатка

Могу ли я обернуть его в CSS или JavaScript, чтобы добиться этого, и иметь приличную адаптивную систему?

Если да, то как?

Спасибо за любую помощь

Дан

Избегайте этого хлюпания - Squished

 <!--Apprentice Section -->
        <div class="slds-grid slds-wrap slds-size_1-of-1 slds-box" Style="background: rgb(170,196,106);
           background: -moz-linear-gradient(top, rgba(170,196,106,1) 0%, rgba(161,213,79,1) 22%, rgba(128,194,23,1) 59%, rgba(170,204,120,1) 100%);
           background: -webkit-linear-gradient(top, rgba(170,196,106,1) 0%,rgba(161,213,79,1) 22%,rgba(128,194,23,1) 59%,rgba(170,204,120,1) 100%);
           background: linear-gradient(to bottom, rgba(170,196,106,1) 0%,rgba(161,213,79,1) 22%,rgba(128,194,23,1) 59%,rgba(170,204,120,1) 100%);
           filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aac46a', endColorstr='#aacc78',GradientType=0 );">
           <div class="slds-text-heading_medium slds-p-around_small slds-size_1-of-1 slds-text-color_default" style="color:Black;">
              <b>Apprentice Section </b>
              <div class="slds-button slds-button_neutral">
                 <a href="#" onClick="MyWindow=window.open('{!Paperwork__c.Apprentice_Link__c}','MyWindow',width=600,height=300); return false;">
                    <div class="slds-text-body_small"> <b>Update Apprentice Section</b></div>
                 </a>
              </div>
           </div>
           <!--Head Row -->
           <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade slds-text-heading_medium " style= "background: rgb(179, 193, 172)">
              <span><b>DATA</b></span>
           </div>
           <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade slds-text-heading_medium" Style = "background: rgb(179, 193, 172)">
              <span><b>--</b></span>
           </div>
           <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_medium slds-theme_shade" Style = "background: rgb(162, 174, 196)">
              <span><b>DATA</b></span>
           </div>
           <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_medium slds-theme_shade" Style = "background: rgb(162, 174, 196)">
              <span><b>--</b></span>
           </div>
           <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade slds-text-heading_medium" Style = "background: rgb(179, 193, 172)">
              <span><b>DATA</b></span>
           </div>
           <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade slds-text-heading_medium" Style = "background: rgb(179, 193, 172)">
              <span><b>--</b></span>
           </div>
           <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_medium slds-theme_shade" Style = "background: rgb(162, 174, 196)">
              <span><b>DATA</b></span>
           </div>
           <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_medium slds-theme_shade" Style = "background: rgb(162, 174, 196)">
              <span><b>--</b></span>
           </div>
           <!--/Head Row -->
           <!--Row 1-->
           <div class="slds-grid slds-wrap slds-size_1-of-1">
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span><b>Apprentice Name</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade " Style = "Height:100px; background: rgb(179, 193, 172) ">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Apprentice_Name__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span><b>Date of Birth</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Date_Of_Birth__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span><b>Assessor</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Assessor__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span><b>Competence APL</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Competence_Aim_to_Deliver__c}"/>
                 </span>
              </div>
           </div>
           <!--/Row 1-->
           <!--Row 2-->
           <div class="slds-grid slds-wrap slds-size_1-of-1">
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span><b>Competence Start Date</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Competence_Start_Date__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span><b>Competence Expected End Date</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Competence_Expected_End_Date__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span><b>Competence Component Title</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Competence_Title__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span><b>Competence Delivery Location</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Competence_Delivery_Location__c}"/>
                 </span>
              </div>
           </div>
           <!--/Row 2-->
           <!--Row 3-->
           <div class="slds-grid slds-wrap slds-size_1-of-1">
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span><b>Competence Awarding Organisation</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Competence_Awarding_Organisation__c   }"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span><b>Competence Learning Aim Ref Aim</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Competence_Learning_Aim_Ref__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span><b>Competence Level</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Competence_Level__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span><b>Competence Tutor</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Competence_Tutor__c}"/>
                 </span>
              </div>
           </div>
           <!--/Row 3-->
           <!--Row 4-->
           <div class="slds-grid slds-wrap slds-size_1-of-1">
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span><b>Competence Title</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade " Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Competence_Title__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span><b>Existing Employee</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Existing_Employee__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span><b>Off The Job Training Hours Required</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Off_The_Job_Training_Hours_Required__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span><b>Hours Worked Per Week</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Hours_Worked_Per_Week__c}"/>
                 </span>
              </div>
           </div>
           <!--/Row 4-->
           <!--Row 5-->
           <div class="slds-grid slds-wrap slds-size_1-of-1">
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span><b>Knowledge APL</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Knowledge_Aim_To_Deliver__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span><b>Knowledge Start Date</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Knowledge_Start_Date__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span><b>Knowledge Expected End Date</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Knowledge_Expected_End_Date__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span><b>Knowledge Title</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Knowledge_Title__c}"/>
                 </span>
              </div>
           </div>
           <!--/Row 5-->
           <!--Row 6-->
           <div class="slds-grid slds-wrap slds-size_1-of-1">
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span><b>Knowledge Delivery Location</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Knowledge_Delivery_Location__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span><b>Knowledge Awarding Organisation</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Knowledge_Awarding_Organisation__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span><b>Knowledge Learning Aim Ref</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Knowledge_Learning_Aim_Ref__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span><b>Knowledge level</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(162, 174, 196)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Knowledge_Level__c}"/>
                 </span>
              </div>
           </div>
           <!--/Row 6-->
           <!--Row 7-->
           <div class="slds-grid slds-wrap slds-size_1-of-1">
              <div class="slds-col slds-size_2-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-text-heading_small slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span><b>Knowledge Tutor</b></span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-box slds-text-align_center slds-align_absolute-center slds-theme_shade" Style = "Height:100px; background: rgb(179, 193, 172)">
                 <span>
                    <apex:outputField Value="{! Paperwork__c.Ck_Knowledge_Tutor__c}"/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12  slds-text-align_center slds-align_absolute-center slds-text-heading_small" Style = "Height:100px">
                 <span><b></b></span>
              </div>
              <div class="slds-col slds-size_1-of-12  slds-text-align_center slds-align_absolute-center" Style = "Height:100px">
                 <span>
                    <apex:outputText Value=""/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12  slds-text-align_center slds-align_absolute-center slds-text-heading_small" Style = "Height:100px">
                 <span><b></b></span>
              </div>
              <div class="slds-col slds-size_1-of-12  slds-text-align_center slds-align_absolute-center" Style = "Height:100px">
                 <span>
                    <apex:outputText Value=""/>
                 </span>
              </div>
              <div class="slds-col slds-size_2-of-12 slds-text-align_center slds-align_absolute-center slds-text-heading_small" Style = "Height:100px">
                 <span>
                    <apex:outputText Value=""/>
                 </span>
              </div>
              <div class="slds-col slds-size_1-of-12 slds-text-align_center slds-align_absolute-center" Style = "Height:100px">
                 <span>
                    <apex:outputText Value=""/>
                 </span>
              </div>
           </div>
           <!--/Row 7-->
        </div>
        <!--/Apprentice Section -->