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”中的所有样式而不是样式，这样您就可以使用media queries

在不同的设备上使用不同的样式

.row {
  margin-left:2em; 
  width:calc(100%-4em);
}

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

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

1 个答案: