HTML responsive auf allen Geräten

Ich habe verschiedene Dinge ausprobiert, aber ich kann meine Webseite nicht automatisch skalieren, wenn Sie ein Fenster ziehen oder wenn Sie Ihr Telefon verwenden, habe ich die script.js und die CSS erstellt.HTML responsive auf allen Geräten

hier ist der code, können sie mir bitte sagen oder mir den code für die css und js schicken?

Dank und sorry

<html xmlns="http://www.w3.org/1999/xhtml" class="sr-lang-en" lang="en" 
<head> 
    <link rel="stylesheet" type="text/css" href="design.css"> 
    <meta name=viewport content="width=device-width, initial-scale=1"> 
    <title>Rivalo Willkommensbonus </title> 
    <link rel="shortcut icon" href="/favicon.ico" /> 
    <link rel="icon" href="/favicon.ico" type="image/ico" /> 
</head> 
<div id="content"> 
    <body class="theme"> 
    <div id="themeBackground" style="background: url(bg.jpg);padding-top:130px;padding-left:00px;padding-bottom:130px;"> 
     <div class="wrapper"> 
     <div class="container"> 
      <center> 
      <div id="content" class="left"> 
       <div id="main_wide"> 
       <div class="cms_richtext"> 
        <div class="box"> 
        <a href="https://www.rivalo.com/de/wettkonto-anmelden/"> 
         <div style="background:url(header_de_main-min.jpg) top center no-repeat;width:1011px;height:494px;"></div> 
        </a> 
        <div style="margin-top:20px;margin-left:40px;width:950px;"> 
         <a href="https://www.rivalo.com/de/wettkonto-anmelden/"> 
         <style scope="" type="text/css"> 
          div.box1 { 
          opacity: 0.9; 
          filter: alpha(opacity=90); /* For IE8 and earlier */ 
          } 
          div.box1:hover { 
          opacity: 1.0; 
          filter: alpha(opacity=100); /* For IE8 and earlier */ 
          -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,1); 
          -moz-box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,1); 
          box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,1); 
          }     
         </style> 
         </a> 
         <a href="https://www.rivalo.com/de/casino-spielen/"> 
         <div class="box1" style="width:219px;height:173px;float:left;background:url(header_de_1-min.jpg) top center no-repeat;margin-right:9px">&nbsp;</div> 
         </a> 
         <a href="https://www.rivalo.com/de/live-wetten/"> 
         <div class="box1" style="width:220px;height:173px;float:left;background:url(header_de_2-min.jpg) top center no-repeat;margin-right:9px;margin-left:9px">&nbsp;</div> 
         </a> 
         <a href="https://www.rivalo.com/de/sportwetten-bonus/"> 
         <div class="box1" style="width:220px;height:173px;float:left;background:url(header_de_3-min.jpg) top center no-repeat;margin-right:9px;margin-left:9px">&nbsp;</div> 
         </a> 
         <a href="https://www.rivalo.com/de/wettkonto-anmelden/"> 
         <div class="box1"style="width:220px;height:173px;float:left;background:url(header_de_4-min.jpg) top center no-repeat;margin-right:9px;margin-left:9px">&nbsp;</div> 
         </a> 
         <div style="clear:both">&nbsp;</div> 
        </div> 
        </div> 
       </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 
</center> 
<script type="text/javascript"> 
    TableHeight(); 
</script> 
</body> 
</html>

Quelle

2017-06-10 Julian

Die Verwendung von absoluten CSS-Einheiten wird nicht helfen. –

Sie werden Prozentsätze anstatt Pixel wie Scott erwähnt verwenden wollen. Fügen Sie max-width dem div direkt innerhalb des box div hinzu und ändern Sie die Breite der box 1's in width: calc (25% - 18px) - so werden sie jeweils 25% der Box betragen und trotzdem den Rand berücksichtigen . –

Teile Ihres HTML sind veraltet (das zentrale Element) und fehlen erforderliche Komponenten (ein Doctype). SO ist hier, um mit dem zu helfen, was Sie geschrieben haben, aber uns zu bitten, Markup zu geben, ist nicht erlaubt. – Rob

Sie sind die Anführungszeichen um "Ansichtsfenster" in der folgenden Zeile im Code fehlt:

<meta name=viewport content="width=device-width, initial-scale=1">

statt

<meta name="viewport" content="width=device-width"; initial-scale="1.0" />

Quelle

2017-06-10 22:11:26 Johannes

Verwendung Prozentsatz sein sollte von Pixeln, wenn ein Wert für eine Breite oder Höhe angegeben wird

Quelle

2017-06-10 22:55:05

-1

Update:

gibt es ein jQuery-Plugin für Zoom in/alle Elemente aus, es von here herunterladen.

hier ein Beispiel:

<div id="element">Click me to zoom</div> 

$(document).ready(function() { 
$("#element").click(function(evt) { 
    $(this).zoomTo({targetsize:2, duration:600}); 
    evt.stopPropagation(); 
}); 
});

Blick auf this demo von zoomooz.js.

In css3 können Sie @media verwenden, um unterschiedliche Bildschirmbreiten zu erkennen. Schau dir das an example

Quelle

2017-06-11 00:24:47

Während ich mit dir übereinstimme, wenn du die Kommentare liest, wirst du sehen, dass das OP klar gesagt hat (weit bevor du deine Antwort geschrieben hast) er möchte (aus irgendeinem Grund) keine Medienabfragen verwenden. –

@ScottMarcus ok, tnx für deine Stimme :) –

HTML responsive auf allen Geräten

Antwort

Verwandte Themen