Ist es möglich, einen Teil eines adaptiven Webdesigns auf kleineren Bildschirmen auszublenden?

Dies ist die News-Seite meiner ersten adaptiven Website.

Geben Sie hier die Bildbeschreibung ein

Die volle Höhe wird angezeigt (der Scroll-Down-Teil ist ebenfalls enthalten).

Die Terrakotta-Abschnitte auf der horizontalen Linie dienen zum Platzieren von Newsfeed-Bildern, und ich möchte diesen Abschnitt in der für Mobilgeräte angepassten Version ausblenden.

Ist es möglich oder kann es zusätzliche Arbeit für die Entwickler kosten?

Ich habe einen Artikel zum Thema Responsive Design geschrieben, der für Sie nützlich sein kann. Diese Frage ist zu weit gefasst. Wenn Sie spezifische Fragen zu Ihrem Design haben, aktualisieren Sie bitte Ihre Frage, um sie einzuschließen
Zunächst einmal ist der Begriff Responsive, nicht Adaptive. Zweitens, ja, das ist sehr gut möglich. Wenn Sie bestimmte Elemente bei unterschiedlichen Bildschirmauflösungen ausblenden möchten, müssen Sie Media Queries in Ihrem CSS verwenden und die Eigenschaft display: none hinzufügen;
Zunächst einmal vielen Dank für die Antwort. Zweitens möchte ich Ihnen sagen, dass "Adaptiv", wie ich in meiner Frage erwähnt habe, bedeutet, dass sich die Website in Echtzeit an die Bildschirmgröße anpasst, und "Responsiv", wie Sie mich korrigiert haben, ein Web ist Designansatz, um die Website anpassungsfähig zu machen =)
Hallo Sonique, ich habe den Titel der Frage bearbeitet, um besser widerzuspiegeln, was Sie meiner Meinung nach fragen. Wenn ich falsch liege, zögern Sie nicht, meine Bearbeitungen rückgängig zu machen oder zu verbessern !

Antworten (1)

Dies sollte einigermaßen problemlos möglich sein, wenn Sie Ihren Webentwickler genau anweisen. Sie müssen der Leiste einen bestimmten sogenannten Namen geben classund eine Medienabfrage hinzufügen, um sie auf kleineren Bildschirmen auszublenden.

Zum Beispiel:

html

<div class="foo">
    <div class="bar-element">
    ...
    </div>
    <div class="bar-element">
    ...
    </div>
    ...
</div>

CSS:

@media only all and (max-width: 660px) {
    .foo {
    display: none;
    }
}