前端响应式布局简单实现
2017-02-24 本文已影响0人
魏小厨
这个方法是监控页面大小,设置页面大小的范围，加载不同的css文件
例子如下
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" media="screen and (max-width:500px)" href="smallcss.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:500px)" href="comcss.css">
</head>
<body>
<div class="topbar">
</div>
<div class="main">
</div>
</body>
</html>
例子中设置如果页面大小最大宽度为500px 则用smallcss.css,如果页面最小宽度为500px，则用comcss.css。
这个方法要在最前面加一行代码<meta name="viewport" content="width=device-width,initial-scale=1">
还可以设置最大/最小高度等
