布局在移动视图中发生了巨大变化

Question

我有这个site
从PC的普通浏览器中看起来还可以。
但是，每当我从检阅切换到移动视图时，它看起来就像这样
http://azlily.bex.jp/eccube_1/html/

2：https://i.stack.imgur.com/uSHAe.png
我是否应该为网站中的所有组件单独设置媒体屏幕？
如果是，则标题为何和某些组件适合移动视图。

Answer 1

您不需要为存在的每个项目实现媒体屏幕。诀窍是使它从头开始响应，然后对布局进行一些小的更改，因为如果需要的话，它会缩小。例如，以这个news_area div部分为例。您已将其放置在其父容器-news_contents的中心。但是不要使用固定的边距将其居中，而要添加css，使其即使在缩小时也可以居中。

示例：

.news_contents {
    width: 100%;
    margin: 0;
    padding: 0;
}
#news_area {
    width: 90%;
    background: #d9d9d9;
    margin: 30px auto!important;
}

[注意：仅在这里需要！important标记才能覆盖您现有的某些CSS。同样，这只是一个展示布局的粗略示例。]

将此内容添加到您的CSS中后，news_area将始终位于其父div的中心，并且始终在两侧都有空格。这就是我从一开始就使用响应式设计对其进行编码的意思。现在，此部分不需要媒体屏幕即可再次更改它，因为它可以在具有原始CSS的所有设备尺寸上使用。