2017-02-12 3 views
1

Gibt es einen Weg/Code, dass ich die Website auf alle Bildschirmgrößen ohne Medienabfrage in der CSS passen kann?Responsive Bildschirmgröße

Der Stil, den ich die CSS-Style-verwenden, nicht Bootstrap noch Flexbox

+0

Beschreiben Sie Ihre Frage/Problem weiter. Eine einfache Website mit einem Absatz wird mühelos auf jedem Gerät reagieren. Warum möchten Sie keine Medienabfragen verwenden? – faviouz

+0

Ich muss eine Website erstellen, die für Mobile, Desktop und Tablet angezeigt werden muss. Aber ich bemerke alle drei Geräte haben unterschiedliche Bildschirmgröße und unterschiedliche Auflösung. Ich habe eine Google-Suche für verschiedene Bildschirmgröße Dimensionen und ich merke, es gibt so viele. Ich weiß, wenn ich Medienabfrage in CSS benutze, kann ich verschiedene Bildschirmgrößen anzielen, um die richtigen Anpassungen vorzunehmen. Aber ich weiß nicht, mit welchen Bildschirmgrößen man am besten die Anpassungen vornimmt. – cord

+0

Auch in diesem Sinne muss ich auch eine Falte für die Website erstellen. zu wissen, dass ich eine Falte für die Website erstellen muss Ich weiß nicht, wo die Höhe mit abgeschnitten für alle Bildschirmabmessungen – cord

Antwort

2

Sie können vh (1% der Fensterhöhe) und vw (1% der Fensterbreite) Einheiten verwenden in Ihren CSS-Definitionen stattdessen (und calc(...) gewünschte Werte).

Btw. flexbox ist CSS-Stil und ist das nächste, was Sie in Betracht ziehen können.

0

können Sie

width:100% 

in Ihrem CSS-Datei für Responsive Design verwenden, dann wird es festgelegt, aber wenn Sie 4 div haben und dann müssen Sie 25% oder weniger verwenden. es wird alle Abschnitt arbeiten, aber wenn es mobiles Gerät dann Gesamtbildschirmgröße ist 500px als wie wenn man dann

width:25% 

enter image description here dann 4 div zeigen verwendet sehr kleine Größe, und es wird dies zu sehen, so nicht gut, wenn Sie verwenden Medienabfrage, dann wird es gut aussehen. aber Prozent (%) funktioniert für Ihren Zweck

+0

Danke für den Screenshot, wie würde sich für jede Fensterhöhe gefaltet entwickeln? – cord

+0

in responsive Design-Breite ist am wichtigsten, aber wenn Sie eine feste Höhe wollen dann funktionieren% und px. In diesem Fall passt% automatisch als Bildschirm an und wenn Sie px verwenden, dann wird, wenn der Bildschirm kleiner ist, der Bildlauf angezeigt und wenn der Bildschirm groß ist, wird der Bildschirm leer –