在 div 上应用 CSS，使其针对所有屏幕进行优化

Question

嗨，我一直在开发一个 Web 应用程序。我有一个包含表单的div。代码如下所示：

 <div class="row" style="margin-left:25%; width:90%;">
   <div class="col s12 m6">
     <div class="card white">
       <div class="row">
         <div class="col s12">
           <form id="example-form">
         <div>
         <h3>Site</h3>
         <section>
           <div id="mustFill">
             <label>Site Name</label>
               <input id="siteName" type="text">
           </div>
           <div id="lookup_field">
           </div>
           <label>Address Line 1</label>

如您所见，我在这里对div 应用了 css 样式：

 <div class="row" style="margin-left:25%; width:90%;">

我已经应用了css，使容器出现在页面的中心，从左侧开始有一个边距，并在%中具有特定的宽度。我最初以完全相同的px(如margin left:400px; width:800px(使用它，这使页面在不同的屏幕尺寸(如iPad，手机，小屏幕笔记本电脑等(上看起来很糟糕。

但是，在%中应用CSS仍然存在相同的问题。我怎样才能CSS应用于这个div，它针对所有屏幕尺寸进行了优化并且看起来并不糟糕。

Answer 1

使用 calc 函数可以更精确

<div class="row" style="margin-left:2em; width:calc(100%-4em);">

这意味着您在 2 个字母宽度的左侧有一个边距，并且您应用的总宽度为 100% - 4 个字母宽度

我建议您在class="row"中使用所有样式而不是样式，这将允许您使用媒体查询在不同的设备上具有不同的样式

.row {
  margin-left:2em; 
  width:calc(100%-4em);
}
@media only screen and (max-width: 480px) {
    .row {
      margin-left:1em; 
      width:calc(100%-2em);
    }
}