前端总结之html：窗口大小改变页面
Posted SchopenhauerZhang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端总结之html：窗口大小改变页面相关的知识，希望对你有一定的参考价值。
学前端有一段时间了，想总结的一致没时间，今天开始写吧！
万事开头难，今天开始写希望能坚持！
当写页面时，我们都会遇到用户会拉伸窗口，改变窗口的大小。比如我们先写一个div,在页面代码中有注释帮助阅读。新手入门，我尽量每行都有注释，方便以后回顾。
这是第二天写的了，一天没写完。尴尬，看见还有20多人看了，哎对不起了。
1 需求；
页面或者窗口大小改变时，页面自动刷新。
2 准备工作
建项目文件（推荐开发工具webstorm我这里都有安装包）
项目文件夹包含：
css文件夹
js文件夹（包含JQ包）
img文件夹
创建html文件.<!-- 职业病，看见代码就动手敲，下面纯手敲的，可能有错，欢迎指正！ -->
<!DOVTYPE html><!--告诉解析器，解析HTML文件（这是一个HTML5文件，版本也会在这里，html默认是H5） -->
<html><!-- html标签是最外围的标签，除了上面的解析的标签其他的都在它的内部 -->
<head><!-- 页面的“头”，不可或缺，页面的名称，属性，等等都在他这里。 -->
<meta lang="en"><!-- 语言en是英语，网上有可以查到 -->
<meta charset="UTF-8"><!-- 解析编码推荐utf-8 -->
<title>页面自动刷新</title><!-- 页面的名称 -->
<link rel="icon" href="页面的头像，图片"/><!-- 粘贴试一试就知道了 -->
<link rel="stylesheet" type="text/css" href="引用的css，样式就写在这个文件里"/>
<style>
<!-- css样式也可以写在这里 -->
body
margin:0;/* 外边距0 */
padding:0;/* 内边距0 */
font:12px/1.8 '微软雅黑';/* 设置页面的字体大小，行高（没记错的话），字体*/
.div
border:1px solid #000;/* 黑色边框 */
min-width:1200px;//这是为适应窗口
background-color:#fff;/* 白色背景 */
.firstDiv
margin:0 auto;/* 使其居中 */
width:200px;
max-width:1200px;
height:200px;
overflow:hidden;/* 溢出隐藏 */
background-color:#000;/* 黑色背景 */
</style>
</head>
<body><!-- 页面上看到的所有东西都在这里了 -->
<div class="div">
<div class="firstDiv">
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function()
$(window).resize(function()
location.reload();/* 页面自动刷新 */
/* 也可以这么写 */
// history.go(0);
/* 自动刷新可以这么写 （以跳转的方式进行）
<meta http-equiv="Refresh" content="5; url=http://www.baidu.com" />
这是跳转到百度，放在<link/>标签的前面，<head>标签里面，跳转到自己也是可以的，改了url的地址就行了，5是时间。
*/
);
);
</script>
</body>
</html>padding，是内边距，margin是外边距，margin有负值和auto，padding没有，然后就是外边距合并了，以后再写。
可以看到，有些网页的页面元素是居中的，比如淘宝等。就是说他的页面时有最小宽度的，当页面最小不能小于它的最小，并且页面body始终居中,并且现在基本都是1200px为最小。
在父元素中添加：
min-width:1200px;
子元素：
max-width：1200px；
margin:0 auto;//上下外边距为0，左右外边距为自动，实现居中
页面的自动刷新：
location.reload();
history.go(0);
两者有区别。网上有许多解释，没接触不乱说。一般使用reload，我感觉history.go（0） 会清除缓存，比如用户登陆了一刷新是不是又要重新登陆呢，history有风险吧！
如果有大牛知道，请留言解释一下！
谢谢！
以上是关于前端总结之html：窗口大小改变页面的主要内容，如果未能解决你的问题，请参考以下文章