自适应布局

最新推荐文章于 2023-10-29 21:15:31 发布

less_cold

最新推荐文章于 2023-10-29 21:15:31 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/less_cold/article/details/52639598

版权

之前用bootstrap的自适应布局，然后没有实现

刚刚忽然脑子里想到了，在javascript中，可以得到页面的长度和宽度，自适应布局有的时候对于长度是没有要求的，毕竟可以用流动条来翻页，但是宽度不一样，

如果宽度设定的不是很合适的时候，流动条左右翻页很烦。

这样的话我们得到了页面的宽度，我们再通过这个页面宽度的变量，来设计各个部分的位置。

这样的话，页面宽度变了，但是每一行的内容不会超过这个宽度。

更有甚至，页面宽度太小我们要舍弃一部分内容！

这在html中很难实现，但是在javascript中可以通过if语句，以及变量的调用来实现。

通过javascript来生成html。

当然这是原生的，有bootstrap可以直接使用。

自动根据浏览器的大小变化进行变化的onresize还没有实现，之后再试试

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>test</title>
		<meta name="author" content="zhaowei" />
		<script src="Apps/Sandcastle/jquery-1.10.1.min.js"></script>  
		<!-- Date: 2016-09-23 -->
	</head>
	<body>
	<div id="container"></div>
     <script type="text/javascript">
     width=$(document).width();
     html="";
     html=html+'<p style="position:fixed;top:0;left:0;">第一部分</p>';
     $('#container').append(html);
     halfwidth=width/2;
     html=html+'<p style="position:fixed;top:0;left:'+halfwidth+'px;">第二部分</p>';
     $('#container').html(html);
   //window.onresize＝function(){width=$(document).width();html=""; html=html+'<p style="position:fixed;top:0;left:0;">第一部分</p>';$('#container').append(html);halfwidth=width/2;html=html+'<p style="position:fixed;top:0;left:'+halfwidth+'px;">第二部分</p>';$('#container').html(html);};
     </script>
	</body>
</html>