Question

我是业余网页设计师，拥有良好的HTML CSS知识，但我是初学者，设计和引导设施。

所以我需要你的帮助来解决我的问题。我的主页设计有不同的部分宽度，例如Header是1480px，服务部分是1240px，Call-To-Action Section是1400px。

我的第二个问题，分辨率为1480像素的主页无法正确显示例如15“宽的笔记本电脑显示器，分辨率为1368像素宽，19英寸显示器，分辨率为1440像素宽，我需要水平滚动查看所有内容页面。

在bootstrap媒体中，对大型desctops的查询是1200px，我的分辨率比这个大，我试着自定义bootstrap 1480像素（1450 +天沟大小）。但就这样，它从1480px跃升到992px。

我希望你能帮助我。

感谢您的时间。祝福。

Answer 1

第1步： 您需要将每个部分 - 标题，服务，号召性用语 - 放入单独的 .container 中，并为它们提供其他类似的CSS：

<div class="container header">
    ...
</div>
<div class="container services">
    ...
</div>
<div class="container call-to-action">
    ...
</div>

第2步： 在您的自定义CSS文件中，为最大屏幕分辨率定义所需的宽度，但我建议使用max-width而不是固定宽度：

.@media (min-width: 1200px) {
    .header, .services, .call-to-action {
        width: auto;
    }
    .header {
        max-width: 1480px;
    }
    .services {
        max-width: 1240px;
    }
    .call-to-action {
        max-width: 1440px;
    }
}

Answer 2

The designer may have created high resolution designs so that you can have high resolution images. I think you should improvise a little and make following adjustments to make it fit inside 1200px wide screens and still maintain the aesthetics.

White header can be fitter inside 1368px easily. Use CSS flexbox which adjusts content automatically and keep everything centered (use justify-content: center).
Keep services section at 100% and then instead of using an img tag use CSS background image with position set to cover. It will auto fit the image in required dimensions. You just have to set a height here.
About us section can be divided into two parts, left (approx 25%) and right (approx 75%). Same goes with Contact section in the end.
Clients section can again be squeezed down. Or it can be converted to a horizontal slider.
Services section again can be squeezed down.
Testimonials section can also be reduces in width. Say 80%.
Maps should be 100%. It will auto fit I think. Just set the height.
Prefooter columns can be approx 16% 16% 34% 34% respectively.
Footer is straight forward. Left column can be 75% and right can be 25%.

You can share your progress via a codepen :) I can suggest you edits there.

我有主页设计与部分，宽度不一样，如何拨打自举？

2 个答案: