自动调整网页到屏幕大小（HTML）

-6

我在互联网上尝试了几个不同的来源。我没有使用bootstrap;我喜欢从头开始做我的网站。它帮助我编程。自动调整网页到屏幕大小（HTML）

我无法让我的网页自动适应屏幕尺寸。例如，如果您使浏览器更小，页面折叠很好，整洁。

我想这些代码从这里：http://www.gonzoblog.nl/2013/01/16/11-useful-css-code-snippets-for-responsive-web-design/

但我的网页不崩溃像例子。

<!-- 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="HandheldFriendly" content="true"> 

    --> 




<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="sunpacking.css"> 
<title>Sun Packing WebSite</title> 
<link href="../../Documents/Sun Packing/sun.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
.div1 { 
    margin: 20px; 
} 
</style> 
</head> 
<body> 


<div style="width:800px; margin:0 auto;"> 


<div id="container"> 
data 
</div> 



/*Sun Packing CSS */ 

    /* 
body{ 

padding:0px; 
margin:0px; 
width:100%; 
height:100%; 

} 

*/ 




#container { 
    float: none; 
    border-style: dashed; 
    border-color: red; 
    width: 100%; /* 95px*/ 

    height: 100%; /*1400px*/ 
    color: red; 
}

来源

2014-09-12 user3416090

编码是不是从网上复制粘贴随机的例子。这是关于*理解*这些例子如何工作，*从他们那里学习*，以便您可以*将这些概念*应用到您自己的代码中。 – 2014-09-12 22:11:54

我明白这一点，但它不是像我无法在一秒钟内想出来的，我现在一直在尝试。 – user3416090 2014-09-12 22:14:12

你真的应该标题你的问题有用，而不是多么绝望你的帮助。 – 2014-09-12 22:19:02

你可以从关闭你的HTML容器开始，给出一个很好的例子。

如果你设置一个明确的宽度，width: 800px;，这就是它将被渲染的宽度。

尝试设置容器的max-width对于这一点，设置宽度扩大到

，我通常做的方式：

.container { 
    max-width: 800px; 
    width: 100%; 
}

来源

2014-09-12 22:23:55 codingninja

自动调整网页到屏幕大小（HTML）

回答

相关问题