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

【问题标题】：Apply CSS on a div to make it optimised for all screens在 div 上应用 CSS 以使其针对所有屏幕进行优化
【发布时间】：2018-01-18 11:11:25
【问题描述】：

您好，我一直在开发一个 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，它针对所有屏幕尺寸进行了优化并且看起来并不糟糕。

【问题讨论】：

如果希望块级元素出现在屏幕中间，请在指定宽度后使用margin: 0 auto。如果您担心让您的页面在多种分辨率下工作，我还建议您考虑使用 CSS 媒体查询。

标签： jquery html css mobile

【解决方案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);
    }
}

【讨论】：