HTML / CSS Wie kann ich die exakte Pixel größe für @Media herausfinden??

Wenn ich meinen Bildschirm bestimmt kleiner oder größer Ziehe, wie finde ich dann die richtige Pixelgröße?

Ich möchte nicht die standart Pixelgrößen von Handys, Tablets etc. verwenden

5 Antworten

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, CSS

03.10.2019, 14:54

Wenn ich meinen Bildschirm bestimmt kleiner oder größer Ziehe, wie finde ich dann die richtige Pixelgröße?

Im Firefox: Extras -> Web-Entwickler -> Bildschirmgröße testen. Dann findest Du oben links ein Feld in dem die aktuelle Fenstergröße angezeigt wird.

Alex

Gaskutscher

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Technik

02.10.2019, 22:03

Breakpoints

https://www.mediaevent.de/css/breakpoints.html

Wieso willst du vom Standard abweichen? Natürlich kannst du es verändern, dann sieht es eben bei Nutzern eventuell "komisch" aus...

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Technik

03.10.2019, 10:03

Jeder Browser besitzt dafür Entwickler-Werkzeuge, mit denen du die Größe des Viewports herausfinden kannst. Öffne einfach im Chrome oder Firefox das Menü und ruf darüber dann die Developer-Tools auf.

Bild zum Beitrag

Wenn du dann die Ansicht vergrößerst oder verkleinerst, wird die der genaue Wert oben angezeigt. Dort kannst du unter anderem vordefinierte Profile auswählen oder eben abliest, bei welchem Viewport eventuell ein MediaQuerie jetzt werden muss.

Man spricht im übrigen auch von Media und Object resp. Element-Queries. Während man mit MediaQueries mehrere Geräteklassen definiert, werden Element bezogene Queries für einzelne Elemente gesetzt. Alles im Grunde das selbe, nur der Bezug ist ein anderer. Arbeite vor allem nach dem Mobile-first Konzept.

LG medmonk

Tyldu

02.10.2019, 22:09

wenn du die firefox developer edition nutzt kannst du strg + shift + m drücken um verschiedene displaygroßen zu testen. dort steht dann auch die pixelgröße.

Woher ich das weiß:Studium / Ausbildung – Softwareentwickler, B. Sc. Informatik

NackterGerd

02.10.2019, 22:31

Ich möchte nicht die standart Pixelgrößen von Handys, Tablets etc. verwenden

Was möchtest du denn sonst?

Leider verstehe ich nicht ganz was du willst

Ähnliche Beiträge

Website vergrößern Html/ Css?

Hallo alle zusammen,

Ich habe eine Website am Laptop mit HTML und CSS programmiert, aber wenn ich das auf dem PC öffnen möchte dann ist das Format kleiner und damit es passt muss ich die Website um 175% vergrößern im browser...

Kann ich das in HTML und CSS irgendwie reinschreiben, dass sich die seite immer automatisch in der größe ist und wenn ja wie?

Danke für eure hilfe

...zum Beitrag

Wann bin ich fertig mit HTML und CSS?

Hallo,

Ich lerne schon seit einiger Zeit HTML und CSS, und habe schon einige etwas größere websiten erstellt (also die grafische Oberfläche). Ich wollte auch bald mit Javascript anfangen, aber man sollte ja erst mit einer anderen Sprache anfangen, wenn mann die erste gut kann, aber ich weiß nicht wann ich bereit bin.

Meine Frage: Was muss ich alles in HTML und CSS können, um mit Javascript anzufangen?

Danke:)

...zum Beitrag

CSS Media query geht nicht richtig?

hallo,ich habe folgendes Problem: Wenn ich bei meiner Website mit CSS per Media query eine responsive Website machen möchte, geht das nicht richtig. Ich muss bei max- und min-width mindestens 1000px eintragen, damit es funktioniert. Kann mir bitte jemand helfen?

...zum Beitrag

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zum Beitrag

Kann man mit html/ css eine Seite automatisch an den Bildschirm anpassen?

Hallo,

jede website die ich im Internet sehe passt sich ohne probleme an die Bildschirm größe automatisch an. Meine Seite tut das nicht ( bin neu in css und co). Gibt es eine Möglichkeit, dass sich mit css/html die Seite an jede Bildschirmgröße anpasst ? oder braucht man ein skript (JS oder PHP)? Irgendwie müssen es die anderen Websites ja schaffen ^^ Google hab ich übrigends rauf und runter durchsucht alle lösungen dort haben mir nicht geholfen.

Der HTML code lässt sich leider nicht einfügen.

LG Mares

...zum Beitrag

CSS: Items untereinander sortieren?

Hallo zusammen,

ich brauche etwas Hilfe mit CSS. Ich habe mir mit HTML ein Div erstellt, und ein paar Social Media Buttons reingepackt:

<div class="social-media-buttons">
<a class="btn" href="https://github.com/dominikdev-m">
<i class="fab fa-github"></i>
</a>
<a class="btn" href="https://twitter.com/DominikMiskovi7">
<i class="fab fa-twitter"></i>
</a>
<a class="btn" href="https://instagram.com/dominik_rxb">
<i class="fab fa-instagram"></i>
</a>
</div>

Dann habe ich mit CSS versucht diese Social Media Buttons untereinander zu sortieren, falls der Nutzer auf einem Gerät ist das maximal 400 Pixel breit ist:

@media only screen and (max-width: 400px) {
    .social-media-buttons {         display: inline-block;     }

Leider funktioniert der CSS Code nicht, die Buttons werden irgendwie komisch sortiert auf dem Smartphone und nicht untereinander. Könnt ihr mir sagen was ich falsch gemacht habe?

Danke im Voraus.

LG, Dominik

...zum Beitrag

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

...zum Beitrag

CSS @media Maximum Width überschreiben?

Guten Morgen,

mein Vater hat eine Website auf MyWebsite von IONOS. Er hat dort einen Buchungskalender, der unter 1025 Pixel Weite nicht angezeigt wird aufgrund folgenden CSS Codes;

@media screen and (min-device-width: 1024px) {
            .mediumScreenDisabled { display:block }
            .smallScreenDisabled { display:block }
        }
        @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } }
        @media screen and (max-device-width: 568px) { .smallScreenDisabled { display:none } }
                @media screen and (min-width: 1024px) {
            .mobilepreview .mediumScreenDisabled { display:block }
            .mobilepreview .smallScreenDisabled { display:block }
        }
        @media screen and (max-width: 1024px) { .mobilepreview .mediumScreenDisabled { display:none } }
        @media screen and (max-width: 568px) { .mobilepreview .smallScreenDisabled { display:none } }

Der @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } } -Teil verhindert das Anzeigen des Kalenders und möchte deshalb die maximale width ändern.

Allerdings gibt es auf MyWebsite selbst wohl keine Option dazu und der IONOS Support meint, dass sie für Drittanbieter Snippets keinen Support anbieten (dabei bin ich mir ziemlich sicher, dass das von denen kommt, da der Kalender in einem iframe eingebunden ist).

Gibt es eine Möglichkeit über CSS die Eigenschaft separat nochmal zu überschreiben, wenn ich das Snippet von oben nicht manipulieren kann?

Danke und LG

...zum Beitrag

Navigation Größe ändern <html/CSS>?

Hallo,

ich will gerade ein Navigation bauen und habe mir mit dieser Seite geholfen.

Mein Problem ist, dass wenn ich das Fenster auf den halben Bildschirm minimiere, dass der ganzen Bereich oben abgedeckt ist, aber wenn ich es auf volle Größe mache, dann ist die Navigation klein. Siehe:

Ich hätte es mit min-width und max-width versucht.

(habe den Code kopiert - im Chrome getestet)

code

Danke im voraus.

...zum Beitrag

HTML und CSS: Text im Button zentrieren?

Auf dem Bild ist ein Bild der Buttons, HTML und meiner CSS Datei.

Ich möchte jetzt den Text in den Buttons, also "Youtube" und "Spotify", zentriert und etwas größer ist.

...zum Beitrag

Tabelle HTML/CSS größer machen?

Ich wollte meine Tabelle etwas größer haben. Jetzt geht sie komplett von Links nach Rechts über den Bildschirm (width: 100%). D.h. nach Links/Rechts ist sie mir groß genug, aber nach unten müsste mir die Tabelle noch etwas größer sein. Was muss ich dafür eingeben in das format.css?

...zum Beitrag

Wie schreibt sich auf HTML ein einfaches "Hintergrund Streifen"?

Würde gerne auf einer Homepage einen einfachen HTML Script einfügen welcher einen Streifen (Beispiel) in Farbe #000000 die gesamte hintere flache bedeckt (Dynamisch je nach Bildschirm Größe)

etwa 30px höhe
Breite bekanntlich dynamisch
Farbe #000000

Siehe Bild als Beispiel

Könnte eventuell jemand einen HTML Script posten?

...zum Beitrag

Hintergrundbild in HTML anpassen?

Hab neu mit HTML und css angefangen...

Ich möchte zum Anfang als Startprojekt sowas wie einen Lebenslauf gestalten und will eben ein bestimmtes Bild als Hintergrundbild.

background-image: url('thumb2-flag-of-bern-4k-swiss-canton-silk-flag-silk-texture.jpg');
background-repeat: no-repeat;

so steht es in meiner CSS, das passt auch nur ist es nur auf dem Viertel des Bildschirms. Was muss ich noch dazuschreiben damit es 1. nur ein Bild ist und nicht wiederholt wird und es sich an die Tabgröße anpasst?

...zum Beitrag

Wie kann man Bilder vergrößern (html/css)?

Ich habe zurzeit das Problem das ich ein Bild nicht vergrößern kann. Ich will, dass das Bild auch auf denn handys richtig zu sehen ist, deswegen will ich es ab 400px vergrößern. Könnte mir da jemand helfen? (Bin ein Anfänger)

Code in html -

Code in css -

@media only screen and (max-width: 400px) {

.img45 .links{

width: 300px; (habe es auch mit % probiert)

}

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen