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响应所有设备

回答

相关问题