自动调整网页到屏幕大小(HTML)
问题描述:
我在互联网上尝试了几个不同的来源。我没有使用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;
}
答
你可以从关闭你的HTML容器开始,给出一个很好的例子。
如果你设置一个明确的宽度,width: 800px;
,这就是它将被渲染的宽度。
尝试设置容器的max-width
对于这一点,设置宽度扩大到
,我通常做的方式:
.container {
max-width: 800px;
width: 100%;
}
编码是不是从网上复制粘贴随机的例子。这是关于*理解*这些例子如何工作,*从他们那里学习*,以便您可以*将这些概念*应用到您自己的代码中。 – 2014-09-12 22:11:54
我明白这一点,但它不是像我无法在一秒钟内想出来的,我现在一直在尝试。 – user3416090 2014-09-12 22:14:12
你真的应该标题你的问题有用,而不是多么绝望你的帮助。 – 2014-09-12 22:19:02