前端总结之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：窗口大小改变页面相关推荐

当浏览器窗口大小改变时，设置显示内容的高度
1 window.οnlοad=function(){ 2 changeDivHeight(); 3 } 4 //当浏览器窗口大小改变时,设置显示内容的高度 5 window.οnresize=fun ...
Vue-cli3项目seo优化--静态化打包（动态改变页面Titl、keyWords、description）
Vue-cli3项目seo优化,静态化打包(动态改变页面Titl.keyWords.description) 文章目录 Vue-cli3项目seo优化,静态化打包(动态改变页面Titl.keyWord ...
html切换下拉菜单改变页面,通过select下拉菜单改变页面内容
web前端使用技巧:通过select下拉菜单改变页面内容方法一: function changeTable(){ var tabIndex = document.getElementById(&qu ...
【Java】监听jframe窗口大小改变函数：addComponentListener
问题描述:主要用于解决Jframe窗口大小变化时,里面的组件的位置也会自适应的移动. 相当于js里面的窗口大小改变监听函数: window.onresize = function(){//js脚本接口 ...
使用ajax和history.pushState无刷新改变页面URL
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别传统的ajax有如下的 ...
mysql中鼠标光标消失了_为什么我这里没有显示鼠标的悬停可改变页面颜色，以为什么我加载了mysql的jar文件还是不能显示报表的内容呢？...
源自:3-6 JSP页面实现为什么我这里没有显示鼠标的悬停可改变页面颜色,以为什么我加载了mysql的jar文件还是不能显示报表的内容呢? 首先是index.jsp pageEncoding=&qu ...
Php点击更换封面,JavaScript_js实现点击图片改变页面背景图的方法，本文实例讲述了js实现点击图 - phpStudy...
js实现点击图片改变页面背景图的方法本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 点击图片即改变页面的背景图片希望本文所述对大家的javascrip ...
jquery监听窗口大小改变事件jquery.resizeend
方法一: $(function(){// Bind the resize event. When any test element's size changes, update its// corre ...
vue使用Echart跟随窗口大小改变而重新绘制时出现读取窗口大小不及时的问题
通过原生自带的window.onresize监听窗口大小 + Echart自带的冲渲染函数.resize() 刚开始我改变大小时感觉挺好但是我一点窗口最大化就开始出现问题他没有时时根据窗口大小改 ...
ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别传统的ajax有如 ...

前端总结之html：窗口大小改变页面

前端总结之html：窗口大小改变页面相关推荐

最新文章

热门文章