我非常讨厌响应式样式如何起作用，我已经使用不同的高度和宽度样式进行了大量研究，但似乎没有一个能满足我的要求。所以现在我觉得最好问一下。
是否可以将我的代码放入容器中，以便在我调整屏幕尺寸或打印时将其保持在1：1比例？
以下是全尺寸显示器上的外观-Full Size Layout
这是“打印”视图的外观-Print Layout
我可以将其包装在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 -->