HTML響應所有設備

我已經嘗試了各種各樣的東西，但當我拖動一個窗口或當您使用手機時，我無法讓我的網頁自動縮放，我創建了script.js和css。HTML響應所有設備

這裏是代碼，請問我可以告訴我還是發送給我的代碼爲CSS和JS？

感謝和抱歉

<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>

來源

2017-06-10 Julian

使用絕對CSS單位不會有幫助。 –

你會想要使用百分比而不是像斯科特提到的像素。在box div中直接添加max-width，並將box 1的寬度改爲width：calc（25％ - 18px） - 這樣，它們每個都是框的25％，同時仍佔邊界。 –

HTML的部分內容已過時（中心元素），缺少必需的組件（文檔類型）。 SO在這裏是爲了幫助您寫下的內容，但要求我們提供標記是不被允許的。 – Rob

你缺少周圍的引號「視」在你的下面的代碼行：

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

應該

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

來源

2017-06-10 22:11:26 Johannes

使用百分比，而不是給寬度或高度值時的像素值

來源

2017-06-10 22:55:05

-1

更新：

有用於放大/縮小的所有元素，從here下載一個jQuery插件。

這裏有一個例子：

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

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

看看zoomooz.js的this demo。

在css3中，您可以使用@media來檢測不同寬度的屏幕。看看這個example

來源

2017-06-11 00:24:47

雖然我同意你的看法，但如果你閱讀了評論，你會發現OP明確指出（在發佈你的答案之前）他不（由於某種原因）想要使用媒體查詢。 –

@ScottMarcus ok，tnx爲您的投票:) –

HTML響應所有設備

回答

相關問題