Question

我的问题是基本和简单我有一个网站正常的CSS代码，我想将其转换为响应式网站是否有任何自动方式来做或生成良好的CSS文件，否则我该怎么办呢。

我的CSS看起来像那样

        #bar1
        {
          border-style:solid;
        border-color:#8c8c8c;
         border-width:1px;
         width:736px;
         height:98px;
         float:right; 
         background-color:white;
          position:absolute;
         top:0px;
         left:212px;

        }

Answer 1

不，如果你想自己做的话，没有什么真正的“自动”......

从广义上讲，您需要替换宽度和宽度的固定像素值。高度与百分比。同时用em替换固定字体大小，并使用百分比或ems进行填充和放大。利润率也是如此。

例如，如果你有这个：

body {
  width: 900px;
}

img {
  width: 300px;
  height: 200px;    
}

将其更改为：

body {
  width: 100%;
}

img {
  width: 30%;
  max-height: 200px;
}

现在，如果您调整浏览器窗口的大小，页面元素将会作出反应。调整。了解媒体查询的使用情况在不同的屏幕宽度设置断点，以更改布局以最适合当前大小。

更重要的是，弄清楚是否/为什么你真的需要一个响应式网站。人们在何处/如何使用它＆amp;您想以不同尺寸显示哪些信息？查看“移动优先”设计注意事项，并为不同大小的站点创建适当的布局，然后找出如何使CSS工作。

...或者跳过所有努力工作＆amp;将您的网站放入Wordpress或已经为您完成此操作的Bootstrap模板。

将普通网站转换为响应式网站

1 个答案: